Question

这是一个弹跳球的画布动画。 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 coords添加到一个数组中，然后使用canvas lineTo（）将每个帧链接到所有这些点，但这会很快达到很多点。

有人可以建议这样做吗？

Answer 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）。~~

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

1 个答案: