不正确的画布宽度值

Question

不正确的画布宽度值

4

所以，我认为这段代码

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>Log Canvas Width</title>
    <style>
        #canvas {
            background: #888888;
            width: 600px;
            height: 600px;
        }
    </style>
    <script>
        function draw() {
            var canvas = document.getElementById('canvas'),
                         context = canvas.getContext('2d');
            document.write(canvas.width);
        }
    </script>
</head>
<body onload="draw();">
        <canvas id='canvas'>
            Canvas not supported
        </canvas>
</body>
</html>

由于 <body onload="draw();"> 使得脚本在页面加载时运行，此时画布还没有捕捉到修订后的值（600），因此会打印出 300 而非 600。

但我将代码修改为：

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>Log Canvas Width</title>
    <style>
        #canvas {
            background: #888888;
            width: 600px;
            height: 600px;
        }
    </style>
</head>
<body>
    <canvas id='canvas'>
        Canvas not supported
    </canvas>
    <script type="text/javascript">
        var canvas = document.getElementById('canvas'),
                     context = canvas.getContext('2d');
        document.write(canvas.width);
    </script>
</body>
</html>

现在我想象脚本在画布从嵌入样式中获取属性之后运行，然后我会看到600。但事实并非如此。尽管画布的宽度确实为600，但我仍然得到300。发生了什么？

- Calaf

3个回答

3

canvas.width和canvas.style.width是两个不同的东西。在大多数情况下，它们应该相等，但为了实现各种效果，它们也可以不同。300是canvas默认宽度。 canvas.width是画布内可用像素的实际数量，而canvas.style.width是HTML元素的宽度，因此如果这两个数字不同，您可能会看到拉伸、像素化等问题。

以下是几个更详细描述此问题的答案：

- Shomz

啊，它们可以通过canvas.style访问..谢谢！我曾经读过（然后，确实忘记了）CSS不影响某些东西的内容。这没有意义。现在我明白了，canvas.width指定了逻辑宽度，而CSS指定了浏览器中的实际大小。然而，实际的扫描线渲染发生在画布上。它只是按比例缩放以适应CSS尺寸。听起来我现在理解了吗？ - Calaf

那绝对是正确的！抱歉我忘了提到 canvas.style 实际上代表 CSS 样式，无论它在何处以何种方式设置。 - Shomz

1

我发现将画布的宽度和高度设置为样式的宽度和高度有助于后续的计算。

例如：

canvas.width = canvas.getBoundingClientRect().width;
canvas.height = canvas.getBoundingClientRect().height;

- ISHRAQ KABIR

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Rayon · Accepted Answer

画布的默认宽度为 300 x 150 [参考文献]。画布不考虑与之相关的 css 定义。您可以定义 width/heigh 属性，或将这些值分配为 canvas 元素的 properties。

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
alert(canvas.width);

<canvas id='canvas' width='600'>
  Canvas not supported
</canvas>

或者

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
canvas.width = 600;
alert(canvas.width);

<canvas id='canvas'>
  Canvas not supported
</canvas>