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;

アルファ チャネル値は、取得するトレイルの量を決定します (少ないほど多くなります)。

更新された例:
http://jsfiddle.net/AbdiasSoftware/eakA4/2/

(PS: Firefox で動作するように修正しrequestAnimationFrameました。コード内のポリフィルを参照してください)。

于 2013-06-22T02:27:02.260 に答える