访问没有“getElementById”的画布元素答案

【问题标题】：Accessing canvas element without "getElementById"访问没有“getElementById”的画布元素
【发布时间】：2018-04-18 18:55:50
【问题描述】：

在这个例子中似乎是通常的“var myCanvas = document.getElementById("myCanvas");”制作正方形的代码不需要访问画布。

忽略这个有什么缺点吗（从缩小的角度来看）？

示例取自here

在 chrome、IE 和 firefox 上测试

//var myCanvas = document.getElementById("myCanvas");
var canvasContext = myCanvas.getContext("2d");
canvasContext.fillRect(100, 100, 100, 100);

<canvas id="myCanvas" width="300" height="300">
Your user agent does not support the HTML5 Canvas element.
</canvas>

【问题讨论】：

【解决方案1】：

这是因为 id 导致画布被视为“命名 element”，HTML standards 中描述的一种行为。对于每个命名元素，浏览器在 document 对象上定义一个相应的全局属性，在本例中为 myCanvas。您可以类似地访问 document.myCanvas。

除了使用var 的含糊性和混乱程度要低得多之外，这种行为在旧版本的 IE 上是不一致的。使用全局变量既不是更快也不是更优化，所以真的没有理由使用它。

要回答您的确切问题，从缩小的角度来看应该没有问题

【讨论】：