Performance 如何以最佳性能在html画布标记上绘制复杂形状？

我使用HTMLCanvas标记在一个小区域（900x500）上绘制大约3000条矢量线。目标平台是移动的，具有固有的较低规格硬件。在我的桌面上，我可以使用moveto和lineto在大约25毫秒内渲染3000条矢量线。然而，在移动设备上，它更像700ms，速度要慢得多。使用画布渲染这些构成复杂形状的线条最有效的方法是什么？画布像素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();

var myArray=[]//包含3000个X&Y类型的对象
对于（var i=0；i这些线条是否相互连接？如果是这样，您可以尝试使用
moveto
、
lineto
、
lineto
等来渲染它们生成的形状。这花费了近50%（或更少）的时间

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

否则，如果您的图形只有一小部分发生了变化，您可以尝试剪切到变化区域，并仅重新绘制其中的线条。
这些线条是否相互连接？如果是这样，您可以尝试使用
移动到
，
行到
，
行到
，
行到
等来渲染它们生成的形状。t他占用了将近50%（或更少）的时间

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

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