0

这是一个弹跳球的画布动画。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() 将所有这些点链接到每一帧，但这会很快达到大量点。

任何人都可以建议这样做的方法吗？

4

1 回答 1

3

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

为此更新了小提琴：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）。

于 2013-06-22T02:27:02.260 回答