javascript - 全部设置的在html文档中到文档的宽度和高度？

Question

如果不使用 jquery（即只使用旧的 javascript），如何将 html 文档中的所有画布设置为文档的宽度和高度？

Answer 1

注意：Chief 和 Naelio 的回答在技术上都是不正确的。

---

Naelio： 更改画布的样式将更改画布的CLIENT WIDTH和CLIENT HEIGHT而不是实际的宽度和高度，因此画布的内容最终将被缩放/拉伸。
这个问题的例子在这里：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 方法更灵活。

Answer 2

我在这里创建了一个 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;

}