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

Question

无论javascript如何，为了显示画布制图标而添加多个html5画布元素是否存在性能问题？ 我的意思是div和canvas sematic元素之间在性能上有区别吗？

我试图远离图像，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或任何你想做的事情。 这是必不可少的，一旦你选择方法，你不应该改变它！ （不要在同一个画布上使用它两次。）
3. 画任何你想要的东西。
4. 从画布中获取数据。 现在最着名的方法是使用“高级”方法toDataUrl。 这很好，很容易做到。 但是在更复杂的应用程序的情况下，你可能也会选择不同的方法，例如webgl有readPixels更快，就像真的很快，你得到的数据更小，你也可以使用剪刀，但它也更难编码。
5. 使用图像数据。 对于base64，它是img src属性的有效参数。 必须首先转换WebGL readPixels。 它可能是二进制blob或base64。

Answer 2

是，

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

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