创建canvas元素的最佳实践

Question

我一直在尝试以几种不同的方式创建一个canvas元素,并且想知道是否有人知道这些(或其他)方法中的哪一种最有效.

最基本的似乎是在html中放置一个canvas元素,如下所示:

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

然后在javascript中:

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

有时我需要将所有画布biznass保存在.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!" 或"获取现代浏览器!"

如果您使用第二种或第三种方法,用户可能永远不会知道,并且他们将继续仅仅考虑您在页面布局上吮吸,因为有一个奇怪的空间,其中应该是后备内容(或画布).

即使不是这样,方法2和方法3也会破坏事物的顺序.你什么时候添加画布？onload火灾后？好吧,通过触发onload页面只是说DOM完成了它的舞蹈,它已经准备好了!然后你去改变DOM!

...太粗鲁了!

当然,你可能不会使用依赖于隐含承诺的任何库,onload因为你通过使用2或3来突破,但如果你可以避免它,那就是不必要的约定.

顺便说一句简单的应用程序或示例的开始我有这个小提琴书签:

http://jsfiddle.net/eAVMs/

哪个使用第一种方法.如果你经常使用画布,你也应该给这个小提琴添加书签!