javascript - 多个 html5 Canvas 元素 : performance issue?

Question

无论javascript如何，添加多个html5 canvas元素以显示 Canvas 制作的图标时是否存在性能问题？我的意思是 div 和 canvas 语义元素在性能上有区别吗？

我正试图远离图像、svg 甚至 fontawesome，这就是我问的原因。

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 创建 Canvas 元素。您不必将其包含到 html 中，为什么呢？这样可能会快一点。
2. 使用 canvas.getContext 2d、WebGL 或任何您想做的事情。这一点很重要，一旦选择了方法，就不能再更改了! (不要在同一个 Canvas 上使用它两次。)
3. 想画什么就画什么。
4. 从 Canvas 中取回数据。现在最广为人知的方法是使用“高级”方法 toDataUrl。这很好而且很容易做到。但是如果应用比较复杂，你也可以选择不同的方法，比如 webgl 有 readPixels哪个更快，就像真的快一样，你得到的数据更小，你之前也可以使用剪刀，但它也更难编码。
5. 将数据用于图像。在 base64 的情况下，它是 img src 属性的有效参数。 WebGL readPixels 必须首先进行转换。它可能是二进制 blob 或 base64。