弹跳球动画：需要留下痕迹答案

【问题标题】：Bouncing ball animation: need to leave a trail弹跳球动画：需要留下痕迹
【发布时间】：2013-06-21 23:32:28
【问题描述】：

这是一个弹跳球的画布动画。 http://jsfiddle.net/eakA4/

我的问题是我希望球留下痕迹，即标记球过去所在位置的线。

判断小球位置的代码是：

  (function drawFrame () {
    window.requestAnimationFrame(drawFrame, canvas);
    context.clearRect(0, 0, canvas.width, canvas.height);
    //theta = Math.atan2(mouse.y-ball.y,mouse.x-ball.x);

    ball.x += vx;
    ball.y += vy;
    if (ball.x > canvas.width - ball.radius) {
        ball.x = canvas.width - ball.radius;
        vx *= -1;
    } else if (ball.x < 0 + ball.radius){
        ball.x = 0 + ball.radius
        vx *= -1;
    }
    if (ball.y > canvas.height - ball.radius){
        ball.y = canvas.height - ball.radius
        vy *= -1;
    } else if (ball.y < 0 + ball.radius){
        ball.y = 0 + ball.radius;
        vy *= -1;
    }
    ball.draw(context);
  }());

我的问题是，因为我使用的是 clearRect()，所以我尝试绘制的任何路径都被清除了。我可以做的是继续将 ball.x 和 ball.y 坐标添加到一个数组中，然后使用画布 lineTo() 将所有这些点链接到每一帧，但这会很快达到大量点。

任何人都可以建议一种方法吗？

【问题讨论】：

这是我将尝试的大纲：保存您在循环缓冲区中使用的最后每 10 个（或第 25 个，或任何看起来不错的）x,y 坐标集。然后，当您绘制时，将这些旧位置从最旧到最新渲染，第一个不透明度接近 0，然后逐渐增加到当前位置的 100。
嗯，谢谢，但我真的很想要完整的历史。

标签： animation canvas simulation game-physics

【解决方案1】：

现在看到你想要一条线作为轨迹，而不仅仅是运动模糊中的轨迹。

为此更新了小提琴：
http://jsfiddle.net/AbdiasSoftware/eakA4/3/

在顶部添加一个新的画布，您可以在其中绘制线条。这样您就可以避免清理并保留所有东西。

~~你可以简单地替换这一行：~~

context.clearRect(0, 0, canvas.width, canvas.height);

用这个：

var tmp = context.fillStyle; //backup fillstyle

context.fillStyle = 'rgba(255,255,255,0.2)';
context.fillRect(0, 0, canvas.width, canvas.height);

context.fillStyle = tmp;

Alpha 通道值决定了您将获得多少轨迹（少即是多）。

更新示例：
http://jsfiddle.net/AbdiasSoftware/eakA4/2/

（PS：我还修复了它，使其可以与 Firefox 一起使用 - 请参阅代码中的 requestAnimationFrame polyfill）。

【讨论】：