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

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
}

参考

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

要获得画布在文档中占用的实际面积，即考虑到padding和border计算出的width / height ，可以使用d[i].offsetWidth / offsetHeight ，尽管我相信这不是OP的目的。 更多详情请参见这里。