如何以最佳性能在 html canvas 标签上绘制复杂形状？答案

【问题标题】：how to draw complex shapes on the html canvas tag with the best performance?如何以最佳性能在 html canvas 标签上绘制复杂形状？
【发布时间】：2011-03-25 07:25:45
【问题描述】：

我正在使用 HTML 画布标签在一个小区域 (900x500) 上绘制大约 3000 条矢量线，目标平台是移动的，它本身具有较低规格的硬件。在我的桌面上，我可以在大约 25 毫秒内使用 moveto 和 lineto 渲染 3000 条矢量线。然而，在移动设备上，它更像是 700 毫秒，速度要慢得多。使用画布渲染这些构成复杂形状的线条的最有效方法是什么？画布像素 API 会更适合这项任务吗？我当前的代码如下所示：

var myArray = []; //contains 3000 objects with X & Y & type
for(var i = 0; i<myArray.length; i++) {
    if(myArray.type = "moveTo") {
        canvasElement.moveTo(myArray[i].X, myArray[i].Y);
    } else {
        canvasElement.lineTo(myArray[i].X, myArray[i].Y);
    }
}
canvasElement.stroke();

谢谢

【问题讨论】：

标签： performance html mobile canvas vector

【解决方案1】：

这些线是否相互连接？如果是这样，您可以尝试使用moveto、lineto、lineto 等渲染它们生成的形状。这会花费将近 50%（或更少）的时间。

对于类似的断开线路，例如3 像素长，水平，您可以为常见的“精灵”渲染小“精灵”——然后将它们绘制为图像可能会更快。

否则，如果您的图形只有一小部分发生变化，您可以尝试剪切到变化区域并仅重绘其中的线条。

【讨论】：

嗨，我不完全确定你的第一点是什么意思，我已经添加了一个代码示例，也许你可以用这个来说明它？我也对你所说的产生小精灵感兴趣，你能解释一下它是如何工作的以及它的性能节省吗？非常感谢
你的代码和我建议的差不多！只要确保所有连接的形状都是用lineto绘制的。关于“线条精灵”，它在很多情况下都不起作用，但我在想如果你有很多具有相同长度和斜率的小线条，那么比如说，200 条带有偏移的线条 (3,1) ，您可以使用一个小的 3x2 透明图像并在其中绘制线条，然后将该图像绘制 200 次到您的主画布中。您可以创建一个散列（例如 {"3x2": Image}）来存储以前绘制的线条。这可能不会更快，这取决于您的数据。