多个 html5 canvas 元素：性能问题？

Question

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

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

Answer 1

是的，

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

如果您打算使用 canvas 然后尝试使用剪辑选项，它会提高性能。

Answer 2

根据要求，我有这个短代码：

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>

简而言之，

使用 javascript 创建 canvas 元素。您不必将其包含在 html 中，为什么呢？这样可能会快一点。
使用canvas.getContext 2d、WebGL 或任何你想做的。这一点很重要，一旦选择了方法，就不能再更改了！（不要在同一个 canvas 上使用它两次。）
想画什么就画什么。
从canvas取回数据。现在最广为人知的方法是使用 "high level" 方法 toDataUrl。这很好而且很容易做到。但是在更复杂的应用中，你也可以选择不同的方法，例如webgl有readPixels，它更快，就像真的快一样，你得到的数据更小，你也可以使用之前的剪刀，但也更难编码。
图像使用数据。在 base64 的情况下，它是 img src 属性的有效参数。 WebGL readPixels 必须首先进行转换。它可能是二进制 blob 或 base64。

多个 html5 canvas 元素：性能问题？

Multiple html5 canvas elements: performance issue?

html

javascript

html5-canvas