Question

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

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

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

然后在javascript中：

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

有时我需要将所有画布bizna保存在.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/

使用第一种方法。如果你经常使用画布，你也应该给这个小提琴添加书签！

Answer 2

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

唯一的方法是ID警告。对于任意创建元素，使用document.write通常被认为是不好的做法。

我可以在这里重复一下，但this answer解释得很清楚。

另外两种方法完全有效且很好。这只是一个偏好问题。通常我会创建一个canvas标签，除非我需要一个临时画布来做某事，其中Ill使用createElement方法。

除此之外，它只是一个偏好问题而且总体上不会以任何方式影响性能。

创建canvas元素的最佳实践

2 个答案: