Javascript 绘制多条任意线是一件非常昂贵的事情

我正在用EaselJS编写一个HTML5 2D“游戏”，它看起来像一个行星/重力模拟器，我决定用一条线追踪行星的运动/轨道，这条线跟随每个行星的运动。下面是一个快速的gif演示：

问题是：如果我在每个记号处创建一条线，画布就会变得非常慢（因为它在每个记号处都画了很多线，这很昂贵），因此我将昂贵的代码移动到

setInterval

，循环之间的间隔为250ms，问题仍然存在，因为当有很多形状时，它会在每个循环中创建很多行。另外，如果我只是在每个循环之间增加更多的时间，结果将开始看起来。。。布雷克拉夫特

我不知道如何解决这个问题，因为我能想到的一切都包括在每个循环中创建大量的线。我尝试过使用缓存，但缓存这些微小的细节行只会导致它们在最终缓存的图像中消失，而且由于问题不在于更新这些行，而是创建新的行，我认为缓存对我没有任何帮助

以下是相关代码：

setInterval(function() {
    allObjs.forEach(function(obj1) {
        if (typeof obj1.xpast !== "undefined" || typeof obj1.ypast !== "undefined") {
            var trail = new createjs.Shape();
            trail.graphics.s("#fff").ss(1, "round").moveTo(obj1.xpast + .5, obj1.ypast + .5).lineTo(obj1.x + .5, obj1.y + .5);
            trail.alpha = 0.25;
            stage.addChild(trail);
            setTimeout(function() {
                createjs.Tween.get(trail).to({
                    alpha: 0
                }, 1000).call(function() {
                    stage.removeChild(trail);
                });
            }, 10000);
        }
        obj1.xpast = obj1.x;
        obj1.ypast = obj1.y;
    });
}, 750);

---

不幸的是，目前我无法将代码放入JSFIDLE中。

当重新绘制画布的每一帧（并清除它以反映不断变化的内容）时，矢量线的累积速度非常快。这是因为图形指令会在每一帧重新绘制。画布上的向量不是硬件加速的，所以当你接近很多行时，使用这种方法会非常慢

最好的方法是缓存向量，然后只绘制新的内容。缓存它时，会在幕后创建一个新的画布元素，并用于代替实际图形。这意味着您可以在不改变性能的情况下，使其变得尽可能复杂

• 将形状缓存到您需要的大小（可能是画布大小？）
• 为该框架绘制新图形
• 更新缓存（将图形内容绘制到现有缓存上）
• 清除图形以备下次使用

GitHub上有一个这样的例子：

• （显示updateCache正在运行）
• （显示了使用非清算阶段的类似方法）

---

希望这有帮助

我以前不知道我可以使用“源覆盖”复合操作将新向量添加到同一缓存中。谢谢你，兰尼兰尼，我应该清除我缓存的每个向量的图形指令吗？在你已经将图形绘制到缓存时清除图形。否则它将再次透支这些指令。