2

だから、私は小さなプロジェクトで HTML5 Canvas に入ろうとしています。これは、単一の点から破裂する赤いレーザーのような線で構成される既存のヘッダーをアニメーション化するものです。私はこれらの線を思い通りに描くことができ、それらをグループとして素晴らしい速度でアニメートすることができますが、次のハードルは私の頭の上にあると思います: 各線を独立して動かしたい!

次のような行の開始点を定義するオブジェクトがあります。

var myLines = {
      a: 1500,
      b: 700,
      c: 400,
      d: 310,
      e: 140,
      f: 60
    }

そして、次のようなループで描画します。

for (var i in myLines)
      {
        var cur = myLines[i];
        context.beginPath();
        context.moveTo(0, canvas.height);
        context.lineTo(canvas.width, myLine.y-cur);
        context.stroke();
      }

厄介なインクリメント方法を使用する:

var step = 1;

    if (myLine.y+step > canvas.height) {set = false;}
    if (myLine.y-step < 0) {set = true;}

    if (set) {
      myLine.y = myLine.y+step;

    } else {
      myLine.y = myLine.y-step;
    }

上記のコードがうまく書かれていないことは承知しています。私はここで私のリーグから外れています。日中は小さなキッチンでシェフとして働いていますが、アドバイスをお願いします!

ここでは、すべての動作を確認するためのフィドルを示します。

前もって感謝します！

4

1 に答える 1

1

もし私があなたなら、各行が単なるオフセットではなく、別々のオブジェクトになるようにスクリプトを変更します。何かのようなもの：

var line = { x: 0, y: 0, speed: 1 };

このようにして、各行に独自の速度を設定できます。ループ内では、次のように速度を追加して、画面の端に到達したときに速度を反転させることができます。

line.x += line.speed;
if(/* edge of screen */) {
    line.speed = -line.speed;
}
于 2012-11-20T17:24:10.933 に答える