多个HTML5画布元素：性能问题？

Question

无论使用JavaScript，为了显示由canvas制作的图标而添加多个HTML5 canvas元素是否存在性能问题？我的意思是，div和canvas语义元素在性能方面是否有差异？

我正在尝试摆脱图像、SVG甚至FontAwesome，这就是我在问的原因。

- Asperger

---

我建议使用一个画布生成所有资源，例如将其保存为 Blob，然后使用常见的 HTML 元素来显示它 (如 img 或 CSS background-img)。 - Entity Black

@EntityBlack，你能展示一下它如何工作的例子吗？我熟悉 CSS 背景但不熟悉画布。 - Asperger

@Asperger，您可以将画布的内容保存为data: URL，然后将其作为图像标签的src或CSS样式的背景URL。 - Alnitak

@Alnitak 哦，我明白了！那不是有点繁琐和凌乱吗？我想这可能会引入其他问题。 - Asperger

无论 JavaScript 如何，canvas 元素只是一个空的 <img> 标签。现在关于 JavaScript，无论你使用什么解决方案将其位图传递给 <img> 标签或任何 CSS 属性，都比简单重绘 canvas 元素更加耗费性能。 - Kaiido

@Asperger，据我所知，你接受的答案中的两个断言都没有事实依据。我之前使用HTML5画布编写了一个非常大的动态图形Web-UI，性能完全不成问题。 - Alnitak

Answer 1

根据请求，我有这段简短的代码：

var canvas = document.createElement("canvas");
canvas.width = 250;
canvas.height = 80;

var ctx = canvas.getContext("2d");

ctx.fillStyle = "#000";
ctx.fillRect(0, 0, 250, 80);
//draw a red box
ctx.fillStyle = "#FF0000";
ctx.font = "30px Tahoma";
ctx.fillText("Hello World", 45, 50);


var dataURL = canvas.toDataURL();
document.getElementById("img-data").innerHTML = dataURL;
document.getElementById("canvas-mirror").src = dataURL;

<div id="img-data"></div>
<img id="canvas-mirror"></div>

简而言之，

1. 使用JavaScript创建画布元素。您不必将其包含在HTML中，为什么要呢？这样可能会快一点。
2. 使用canvas.getContext 2d、WebGL或您想要的任何内容进行操作。这是必要的，一旦选择了方法，就不应该更改！（不要在同一个画布上使用两次）
3. 绘制任何您想要的东西。
4. 从画布获取数据。现在最常用的方法是使用“高级”方法toDataUrl。这很好且易于执行。但是，在更复杂的应用程序中，您可能还可以选择不同的方法，例如webgl有readPixels，它速度更快，数据更小，你也可以在此之前使用剪刀，但编码难度也大得多。
5. 将数据用于图像。对于base64，它是img src属性的有效参数。 WebGL readPixels必须首先进行转换。它可能是二进制blob或base64。

- Entity Black

---

我知道OP明确表示“不考虑JavaScript”，但你在这里使用JavaScript的做法就像是对一个画布元素进行了一千次重绘。此外，将其转换为dataURI版本会使整个图像保留在浏览器的内存中，就在画布元素旁边，直到垃圾回收启动。 - Kaiido

@Kaiido 这只是最简单的例子，我在答案中已经说明了。我没有看到任何“千次重绘”画布元素，我只看到了2个。 这是真的，dataURI会将图像放入浏览器内存中，但OP表示他想要将其用于仅具有少量颜色的小图标。 DataURI就是为这样的事情而设计的。此外，我明确指出可以使用blob文件。 当然，我希望有人在实际使用之前先动动脑筋。 - Entity Black

我所说的绘画是浏览器对页面中任何元素进行的绘制，如果不考虑js方面，这是唯一的性能问题。toDataURL方法本身有点慢，创建img元素并设置其src也有成本。 - Kaiido

Answer 2

是的，

性能取决于所有画布的总面积，尽量保持它（画布的总面积）小。

如果您计划使用画布，则尝试使用剪辑选项，它将提高性能。

- Scarecrow

---

你对于 Entity Framework 的技巧有何看法？ - Asperger

是的，页面上所有元素的总数增加会降低性能。就我所知，这不是一个具体的答案。 - Alnitak

Entity Blacks是正确的，但是在绘制多次时，您还需要注意活动绘图区域，这将花费时间来绘制公共区域，如果有不透明度，则绘制时间还会增加。 - Scarecrow

你有这方面的参考资料吗？在我看来，“无论JavaScript如何”，Canvas元素就像一个<img>元素一样。文档的重绘将是相同的。 - Kaiido

@Kaiido *这个回答中的两个断言都需要引用。 - Alnitak

@Alnitak 完全同意，剪裁只会增加更多的计算量。 - Kaiido