使用CSS时，画布会拉伸，但使用“正常”；宽度"；/&引用；高度“；性质

我有两张画布，一张使用HTML属性

width

和

height

来调整大小，另一张使用CSS：

Computer1显示的是它应该显示的，但不是Computer2。内容是使用JavaScript在300x300画布上绘制的

为什么会有显示差异

---

似乎

宽度

和

高度

属性决定画布坐标系的宽度或高度，而CSS属性只决定将在其中显示画布的框的大小

这在（需要JS）或（可能会吃掉你的电脑）中解释：

canvas

元素有两个属性来控制元素位图的大小：

width

和

height

。指定这些属性时，其值必须是有效的非负整数。必须使用解析非负整数的规则来获取其数值。如果缺少属性，或者如果解析其值时返回错误，则必须使用默认值。

width

属性默认为300，而

height

属性默认为150

---

要设置所需的

宽度

和

高度

，可以使用

canvasObject.setAttribute('width', '475');

---

如果在CSS中设置宽度和高度，画布将被拉伸。如果要动态操纵画布的维度，必须使用JavaScript，如下所示：

canvas = document.getElementById('canv');
canvas.setAttribute('width', '438');
canvas.setAttribute('height', '462');

对于

元素，

宽度

和

高度

的CSS规则设置将绘制到页面的画布元素的实际大小。另一方面，

width

和

height

的HTML属性设置画布API将使用的坐标系或“网格”的大小

例如，考虑这个（）：

var ctx=document.getElementById（'canvas1'）.getContext（'2d'）；
ctx.fillStyle=“红色”；
ctx.fillRect（10,10,30,30）；
var ctx2=document.getElementById（'canvas2'）.getContext（'2d'）；
ctx2.fillStyle=“红色”；
ctx2.fillRect（10,10,30,30）
画布{
边框：1px纯黑；
}
浏览器使用css宽度和高度，但画布元素根据画布宽度和高度进行缩放。在javascript中，读取css宽度和高度，并将画布宽度和高度设置为该值

var myCanvas = $('#TheMainCanvas');
myCanvas[0].width = myCanvas.width();
myCanvas[0].height = myCanvas.height();

山尼马尔校正

var el = $('#mycanvas');
el.attr('width', parseInt(el.css('width')))
el.attr('height', parseInt(el.css('height')))

如果希望基于CSS媒体查询等动态行为，请不要使用画布宽度和高度属性。使用CSS规则，然后在获取画布渲染上下文之前，将CSS宽度和高度样式指定给宽度和高度属性：

var elem = document.getElementById("mycanvas");

elem.width = elem.style.width;
elem.height = elem.style.height;

var ctx1 = elem.getContext("2d");
...

CSS设置画布元素的宽度和高度，从而影响坐标空间，使绘制的所有内容都倾斜

下面是我如何使用Vanilla JavaScript设置宽度和高度的方法

canvas.width = numberForWidth

canvas.height = numberForHeight

的确我一直认为像“width”和“height”这样的直接属性在最近的html版本中是不受欢迎的。哦，很显然，在（部分
#attr canvas width
）中对它的描述相当好。问题是，我之前点击了错误的
宽度
，而转到了
#dom canvas width
部分。有一个看起来像但与另一个完全不同的API（css宽度、高度）。哇，当你想要内部坐标系不同的时候，区分这些是很重要的。（即视网膜显示器或8比特风格的游戏）这真是令人困惑。我们正在尝试在css中设置宽度和高度。我们花了两天的时间来研究这两种关于宽度和高度的不同解释。哇…+1
el.setAttribute（'width'，parseInt（'el.css（'width'））
成功了，谢谢。如果我想让画布有一个相对大小，该怎么办？也就是说，如何模拟
宽度：100%css属性？回答得很好，但别忘了添加canvaObject.setAttribute（'height'，'123'）！我认为您不需要使用.setAttribute（），我一直使用.width和.height属性在JavaScript中使用：
canvas.setAttribute（'width'，window.getComputedStyle（canvas，null）.getPropertyValue（“width”）。重复高度，太棒了！谢谢你的回答。我必须将
canvas.setAttribute
放在
canvas.getContext（'2d'）
之前，以避免图像拉伸。很明显，如果仅在CSS中指定大小，画布将获得默认坐标大小（300 x 150）。但是，这个建议对我不起作用，但下面的解决方案确实起作用。@PerLindberg-如果您为canvas元素定义了CSS宽度和高度（以像素为单位），那么这个解决方案就起作用了。