问是否将html文档中的所有<canvas>设置为文档的宽度和高度？

EN

注意:首席执行官和Naelio的答案在技术上都是不正确的。

Naelio:更改画布的样式将更改画布的CLIENT WIDTH和CLIENT HEIGHT，而不是代码实际的<>e213宽度和高度，因此画布内容最终将被缩放/拉伸。

这个问题的例子在这里：http://jsfiddle.net/AnLCw/1/ (注意黑色50x50正方形是如何使用样式方法拉伸的)

Chief17：不能按百分比指定画布的宽度和高度。这里的问题示例：http://jsfiddle.net/Sg7cb/2/ (请注意，当宽度和高度为百分比时，不会显示画布)

下面是实际的解决方案

您需要将画布的样式设置为:宽度: 100%，高度: 100%

canvas.style.width = "100%"
canvas.style.height = "100%"

然后执行以下操作：

canvas.width = canvas.clientWidth
canvas.height = canvas.clientHeight

这里的工作示例：http://jsfiddle.net/acYdc/1/ (请注意黑色正方形是如何正确绘制的，画布是如何填充该区域的。)

另一种解决方案就是设置

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

但是canvas.width = canvas.clientWidth方法更灵活。

我在这里创建了一个jsFiddle：http://jsfiddle.net/ZrfeV/

您需要为文档指定一个高度，以便画布知道要扩展到多大，否则它将扩展到文档通过其子元素的内部高度获得的高度。

var canvases = document.getElementsByTagName('canvas');

for (var i = 0; i < canvases.length; i++) {

    canvases[i].style.width = '100%';
    canvases[i].style.height = '100%';
    canvases[i].width = canvases[i].clientWidth;
    canvases[i].height = canvases[i].clientHeight;

}