javascript - 访问没有 "getElementById"的 Canvas 元素

Question

这个例子似乎是通常的“var myCanvas = document.getElementById("myCanvas");”生成正方形的代码不需要访问 Canvas 。

(从缩小的 Angular 来看)将其排除在外有什么缺点吗？

示例取自 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 导致 Canvas 被认为是“命名的element”，一种在 HTML standards 中描述的行为。对于每个命名元素，浏览器在 document 对象上定义一个相应的全局属性，在本例中为 myCanvas。您可以类似地访问 document.myCanvas。

除了使用 var 更加明确和令人困惑之外，这种行为在旧版本的 IE 上是不一致的。使用全局变量既不会更快也不会更优化，因此确实没有理由使用它。

要回答你的确切问题，从缩小的 Angular 来看应该没有问题