6

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

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

<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');

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

4

2 回答 2

6

第一个是目前最好的。

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

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

如果你使用第二种或第三种方法，用户可能永远不会知道，他们会继续认为你在页面布局上很烂，因为有一个奇怪的空间应该是后备内容（或画布）。

即使除此之外，方法 2 和 3 还是稍微打乱了事情的顺序。你什么时候添加画布？onload火灾后？好吧，通过触发onload页面，刚刚说 DOM 完成了它的舞蹈并且一切就绪！然后你去改变 DOM！

...真没礼貌！

当然，您可能不会使用任何依赖于隐含承诺的库，onload因为您使用 2 或 3 有点破坏，但如果您可以避免它，这是不必要的破坏约定。

顺便说一句，对于简单的应用程序或示例，我已将这个小提琴添加为书签：

http://jsfiddle.net/eAVMs/

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

于 2012-06-16T03:17:25.520 回答
1 
document.write("<canvas id='myCanvas' width='500', height='500'></canvas>");

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

我可以在这里重复为什么，但是这个答案很好地解释了它。

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

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

于 2012-06-16T02:35:32.627 回答