Question

无论javascript如何，在添加多个html5 canvas元素以显示canvas制作图标时是否存在性能问题？我的意思是在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>

简而言之，

使用javascript创建canvas元素。你不必将它包含在html中，为什么会这样？这样它可能会快一点。
使用canvas.getContext 2d，WebGL或您想要做的任何事情。这是必不可少的，一旦你选择方法，你不应该改变它！（不要在同一个画布上使用它两次。）
画出你想要的任何东西。
从画布中获取数据。现在最着名的方法是使用“高级”方法toDataUrl。这很好，很容易做到。但是在更复杂的应用程序的情况下，你也可以选择不同的方法，例如webgl有readPixels哪个更快，就像真的很快，你得到更小的数据，你也可以使用剪刀，但它也更难编码。
使用图像数据。对于base64，它是img src属性的有效参数。必须首先转换WebGL readPixels。它可能是二进制blob或base64。

Answer 2

是，

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

如果您打算使用canvas，那么尝试使用裁剪选项，它会提高性能。

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

2 个答案: