javascript - 创建 Canvas 元素的最佳实践

Question

我一直在尝试以几种不同的方式创建 Canvas 元素，想知道是否有人知道这些(或其他一些)方式中哪种方式最有效。

最基本的似乎是像这样在 html 中放置一个 Canvas 元素:

<canvas id="myCanvas" width="500", height="500"></canvas>

然后在 javascript 中:

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');

有时我需要将所有 Canvas 业务保存在一个 .js 文件中(例如，当我想动态更改元素的宽度/高度时)，我会这样做:

var canvas = document.createElement('canvas');
document.body.appendChild(canvas);
canvas.height = '500';
canvas.width = '500';
var ctx = canvas.getContext('2d');

或者当我懒惰的时候，像这样:

document.write("<canvas id='myCanvas' width='500', height='500'></canvas>");

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');

优点？缺点？编辑？其他选择？

Answer 1

第一个是迄今为止最好的。

第一个在效率上(略微)胜出，因为第二个和第三个导致页面不必要地重新布局。此外，如果 JavaScript 中存在错误导致后续执行停止，则页面看起来会非常奇怪。

此外，出于可访问性目的，您应该始终选择第一个。 如果有人禁用了 JavaScript，您仍然希望他们看到后备内容。即使只是说“打开 JavaScript!”或“获取现代浏览器!”

如果您使用第二种或第三种方法，用户可能永远不会知道，他们只会继续认为您的页面布局很糟糕，因为有一个奇怪的空间，应该是后备内容(或与此相关的 Canvas ) .

---

除此之外，方法 2 和 3 还是稍微破坏了事物的顺序。你什么时候添加 Canvas ？ onload 触发后？好吧，通过触发 onload 页面只是说 DOM 已经完成了它的舞蹈并且一切准备就绪!然后你去改变 DOM!

...多么粗鲁!

当然，您可能不会使用任何依赖于 onload 中隐含 promise 的库，您使用 2 或 3 有点违反约定，但如果你可以避免它。

---

顺便说一句，为了开始简单的应用程序或示例，我将这个 fiddle 加入了书签:

http://jsfiddle.net/eAVMs/

其中采用了第一种方法。如果你经常使用 Canvas ，你也应该收藏这个 fiddle !