为什么我们不能使用 css 设置画布的宽度和高度 [重复]答案

【问题标题】：why we can't set width and height for canvas using css [duplicate]为什么我们不能使用 css 设置画布的宽度和高度 [重复]
【发布时间】：2014-12-27 13:05:39
【问题描述】：

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

HTML：

 <canvas></canvas>

CSS：

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

【问题讨论】：

在哪个浏览器中？在 Chrome 38 和 Firefox 32 上，您的代码运行良好。 (codepen.io/anon/pen/wsIyp)
在 chrome 27 中。我创建了画布并通过 css 文件设置宽度和高度
没有在画布上工作的人不要投反对票。这个问题好不好？
stackoverflow.com/questions/2588181/…

标签： javascript jquery html css html5-canvas

【解决方案1】：

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

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

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

【讨论】：

OP问为什么没有使用css为画布设置宽度和高度？
@JqueryKing 我已经更新了我的答案。

【解决方案2】：

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

我通常会添加类似

的内容

border: 1px solid;

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

【讨论】：

用浏览器检查。通过css文件代码设置画布宽度和高度时，画布渲染对象似乎缩放
@Collins - 你在画布上画线意味着它不会出现尝试一下
我刚刚检查过，chrome 39、firefox 34 似乎没有任何问题。更新小提琴 - jsfiddle.net/12351c6c/9
@albertJegani 我在回答中已经解释过了。

【解决方案3】：

您可以使用 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-canvas-width

希望能回答你的问题。

【讨论】：

【解决方案4】：

所以认为画布元素由两个不同的视图组成。

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

第一种方法：

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

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

第二种方法：

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

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

【讨论】：

看stackoverflow.com/questions/2588181/…