如何更改画布的宽度或高度？

Question

我有一个简单的脚本，可以选择我文档中的所有画布。我想循环遍历它们并调整它们的宽度和高度。

我希望有人可以解释我如何访问画布的属性，以便我可以更改它们。我用它测试了它：

var d = document.getElementsByTagName('canvas');
for (var i=0, max=d.length; i < max; i++) {
  console.log(d[i].style.width); // blank
}

问题是，我的console.log显示空行，所以我有点困惑。我希望你能在这里解释我的错误。

Answer 1

canvas具有您可以获取和设置的width和height属性，这些属性代表实际的绘图区域：

var d = document.getElementsByTagName('canvas');
for (var i = 0, max = d.length; i < max; i++) {
    console.log(d[i].width); // 300 per default
}

Fiddle

Reference

使用CSS或内联style只会缩放绘图区域，类似于应用于图像的CSS宽度/高度，而实际绘图区域将保持不变。

为了获得画布在文档中采用的实际区域，即考虑width和height计算的padding / border，您可以使用{ {1}} / d[i].offsetWidth，但我相信这不是OP的意图。有关此here的详细信息。