访问canvas元素而不使用“getElementById”

Question

在这个例子中似乎是通常的“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>

Answer 1

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

除了使用document.myCanvas更多，更不含糊和混淆之外，这种行为在旧版本的IE上不一致。使用全局变量既不快也不优化，所以没有理由使用它。

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