如何为Canvas设置背景图片并实现窗口缩放无拉伸变形？

问题诊断 #

1. 路径与语法错误：url与括号间不能有空格，且网页无法直接访问本地绝对路径（浏览器安全限制），需改用相对路径；原代码margin:20缺少单位，会导致布局异常。
2. Canvas尺寸未同步：仅通过CSS设置Canvas宽高会导致画布像素拉伸，需同时匹配元素的width和height属性。
3. 背景图无自适应规则：缺少控制图片缩放行为的CSS属性，导致窗口变化时图片被拉伸挤压。

修复后的完整代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>shark?</title>
    <style>
        html, body {
            height: 100%;
            width: 100%;
            margin: 0;
            overflow: hidden;
        }
        .container {
            display: flex;
            flex-direction: column; 
            align-items: center;
            justify-content: center;
            height: 100%;
            width: 100%;
        }
        h1 {
            margin-top: 10px; 
        }
        canvas {
            background-image: url("backg.jpg");
            background-size: contain;
            /* 若需铺满画布且裁剪超出部分，替换为 background-size: cover */
            background-repeat: no-repeat;
            background-position: center;
            margin: 50px; 
            flex: 1;
            width: calc(100% - 100px);
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>shark?</h1>
        <canvas id="bgCanvas"></canvas>
    </div>
    <script>
        const canvas = document.getElementById('bgCanvas');
        
        // 同步Canvas像素尺寸与显示尺寸
        function resizeCanvas() {
            const rect = canvas.getBoundingClientRect();
            canvas.width = rect.width;
            canvas.height = rect.height;
        }
        
        // 初始化+窗口变化时重调尺寸
        resizeCanvas();
        window.addEventListener('resize', resizeCanvas);
    </script>
</body>
</html>

关键说明 #

• 路径修正：将图片backg.jpg放在HTML文件同目录下，使用相对路径确保浏览器正常加载。
• Canvas尺寸同步：通过JS监听窗口resize事件，实时更新Canvas的width和height属性，避免画布像素拉伸变形。
• 背景图自适应：
  • background-size: contain：保持图片比例，完整显示在Canvas内，空白区域留空；
  • background-size: cover：保持图片比例，铺满整个Canvas，超出部分被裁剪；
  • 配合background-position: center实现居中，background-repeat: no-repeat禁止重复显示。

内容的提问来源于stack exchange，提问作者RelCade