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

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 显示空白行，所以我有点困惑。我希望你能在这里解释我哪里出错了。

score 2 · Accepted Answer

canvases 有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
}

参考

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

并获得画布在文档中占用的实际区域，即计算width/height考虑padding和border，您可以使用d[i].offsetWidth/ offsetHeight，尽管我相信这不是 OP 的意图。更多细节在这里。