创建画布元素的最佳做法

best practice for creating a canvas element

本文关键字：最佳 元素 布元素 创建      更新时间：2023-09-26

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

最基本的似乎是在 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');

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

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

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

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

如果您使用第二种或第三种方法，用户可能永远不会知道，他们将继续认为您很糟糕的页面布局，因为有一个奇怪的空间，回退内容（或画布）应该在那里。

即使除此之外，方法 2 和 3 也稍微打破了事情的顺序。何时添加画布？onload火灾之后？好吧，通过onload开火，页面只是说 DOM 已经完成了它的舞蹈，一切都准备好了！然后你去改变 DOM！

。多么粗鲁！

当然，您可能不会使用任何依赖于 onload 中隐含承诺的库，即通过使用 2 或 3 来打破约定，但如果可以避免它，这是不必要的违反惯例。

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

http://jsfiddle.net/eAVMs/

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

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

是 Id 警告的唯一方法。使用document.write通常被认为是任意创建元素的不良做法。

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

另外两种方法是完全有效且良好的。这实际上只是一个偏好问题。通常，我会创建一个画布标签，除非我需要临时画布来执行某些操作，其中 Ill 使用 createElement 方法。

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

相关文章：