为什么我们可以't使用css设置画布的宽度和高度

why we can't set width and height for canvas using css

本文关键字：设置 高度 css 使用 我们 为什么      更新时间：2023-09-26

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

Html:

 <canvas></canvas>

Css:

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

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

canvas width，height属性决定了将用于在画布上绘制的实际像素。它用于画布坐标系统。

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

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

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

希望能回答你的问题。

因此，将画布元素想象为由两个不同的视图组成。

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

第一种方法：

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

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

第二种方法：

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

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

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

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

至于你的问题，这是因为你通过css调整大小的唯一因素是画布的"容器"，而不是画布本身的大小。当你试图在画布上绘制的"容器"大小大于画布本身的大小时，图像看起来会很模糊。

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

我通常添加之类的东西

border: 1px solid;

到我的css，让我算出宽度和高度。你可以查看我的小提琴

相关文章：