javascript - 动态图像会导致性能问题吗？

Question

我正在使用 Canvas 创建动态图像。我需要一个带有动态文本的图像，因此在 Canvas 的帮助下，我创建了图像(base64)并附加到图像标签，这很好。但是，当创建大量动态图像时，我会在 chrome inspectelement -> Resources -> images 中看到。创建的所有动态图像都缓存在浏览器中，这会导致移动设备的性能或内存问题，或者我可以在使用后删除它。对此有何建议。

var image = new Image();
image.src = canvas.toDataURL("image/png");

Answer 1

您应该每次都重复使用相同的 Canvas ，

使用 Canvas 图像后，删除 Canvas 上的所有绘图

var ctx = canvas.getContext("2d");
ctx.clearRect(0,0,canvas.width,canvas.height);

然后再次在 Canvas 上绘制并使用它...