为什么我们不能使用css设置canvas的宽度和高度

Question

为什么画布显示为缩放，当在css中指定高度和宽度而不是DOM时？

Html：

 <canvas></canvas>

Css：

 canvas{
       width:100px;
       height:100px;
    }

Answer 1

您可以使用CSS在画布上设置宽度和高度 - 但是，

画布宽度，高度属性确定将用于在画布上绘制的实际像素。它用于帆布协调系统。

另一方面，CSS宽度/高度与盒子模型有关。

默认情况下，画布使用300px宽度和150px高度。如果设置CSS宽度/高度而不设置将应用于300px / 150px的画布属性。想象一下300px / 150px大小的图像，您可以使用CSS将宽度/高度设置为100px / 100px。会发生什么？会扭曲吗？同样适用于画布的东西。

您可以在HTML生活标准页面找到更多详细信息 - https://html.spec.whatwg.org/multipage/scripting.html#attr-canvas-width

希望能回答你的问题。

Answer 2

所以想想canvas元素由两个不同的视图组成。

1. html元素（画布）。
2. 画布的内部绘图表面。

第一种方法：

通过css设置画布的高度和宽度只会将它们设置为html元素画布，而不是设置为内部绘图表面（对于canvas元素，这通常是不好的做法）。

现在通常采用这种方法，当元素宽度和高度大于绘图表面的默认宽度和高度时，浏览器会做什么，它会缩放绘图表面以查找画布元素大小。因此，您会注意到绘图表面已放大。

第二种方法：

通过元素宽度和高度属性设置画布的高度和宽度，将它们设置为画布和绘图表面。像这样，

<canvas width="300" height="300"></canvas>

Answer 3

canvas元素具有height和width属性。通过javascript代码分配值：

var canvas = document.getElementsByTagName('canvas')[0];
canvas.width  = 100;
canvas.height = 100;

关于你的问题，这是因为你通过CSS调整大小的唯一内容是＆＃34;容器＆＃34;画布的大小，而不是画布本身的大小。当您尝试使用＆＃34;容器＆＃34;在画布上绘图时尺寸大于画布本身的尺寸，图像看起来会模糊不清。

Answer 4

你的写作方式似乎没有任何问题。您是否检查过是否正确链接了CSS文件？

我通常会添加类似

的内容

border: 1px solid;

给我的css让我弄清楚宽度和高度。您可以查看我的fiddle