2

背景用のグリッドを作成しました。X と Y の for ループを使用してグリッドを作成し、正方形を描くことができました。

両方の軸で +=1 を使用して x と y に移動するようにグリッドをアニメーション化する方法はありますか?

グリッドを 1 つの大きなレイヤーにペアレント化し、各正方形をアニメーション化する代わりにレイヤーをアニメーション化することを考えていました。

http://jsbin.com/emexaz/1/edit

編集: context.translate を使用して理解しようとしています。ただし、1 秒あたりの間隔ごとに (setInterval のミリ秒が 1000 であると仮定すると)、値が 2 倍になります。

4

1 に答える 1

2

キャンバスでグリッドをループする方法は次のとおりです

移動グリッドを描画するには、いくつかの方法があります。これはそれらの1つです。

ここにコードとフィドルがあります: http://jsfiddle.net/m1erickson/AjZhD/

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ background-color: ivory; }
    canvas{border:1px solid red;}
</style>

<script>
$(function(){

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    var w=canvas.width;
    var h=canvas.height;
    var offsetX=0;
    var offsetY=0;
    var rectX=0;
    var rectY=0;

    setInterval(function(){drawGrid();},100);

    function drawGrid(){

      // move the grid
      offsetX+=5;
      offsetY+=5;
      if(offsetX==20){offsetX=0;}
      if(offsetY==20){offsetY=0;}
      rectX+=5;
      rectY+=5;
      if(rectX==w){rectX=0;}
      if(rectY==h){rectY=0;}

      ctx.save();
      ctx.clearRect(0,0, w, h);
      ctx.strokeStyle="gray";
      ctx.beginPath();
      // vertical grid lines
      for(var x=offsetX;x<w;x+=20){
            ctx.moveTo(x,0);
            ctx.lineTo(x,h);    
      }
      // horizontal grid lines
      for(var y=offsetY;y<h;y+=20){
            ctx.moveTo(0,y);
            ctx.lineTo(w,y);    
      }
      // "moving" rect
      ctx.fillStyle="red";
      ctx.rect(rectX-4,rectY-4,8,8);

      ctx.stroke();
      ctx.fill();
      ctx.restore();

  }

}); // end $(function(){});
</script>

</head>

<body>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>

[コードの仕組みの詳細を編集]

できる…もっと詳しい説明があります。

これらの var を使用すると、グリッド線をキャンバスの右および下に移動できます。これらは、グリッドの次のフレームと次の赤い四角形を描画する場所を教えてくれます。

    var offsetX=0;
    var offsetY=0;
    var rectX=0;
    var rectY=0;

次に、setInterval は、100 ミリ秒ごとに drawGrid() を呼び出すだけのループです。

ところで、Loktar は完全に正しいので、簡単なテスト以外の場合は、setInterval の代わりに requestAnimationFrame を使用する必要があります。requestAnimation フレームには、パフォーマンスを向上させ、リソースの使用量を削減する最適化が組み込まれています。 

    // repease drawGrid() every 100 milliseconds
    setInterval(function(){drawGrid();},100);

drawGrid() では、offsetX/Y と rectX/Y を増やして、グリッドを右と下に描画し始めます。20px 移動した後、グリッドは基本的に開始時と同じ視覚的位置に戻っていることに注意してください! これにより、単純に移動オフセットを 0 にリセットし、グリッドが右/下に 1 マス以上移動しているような視覚的錯覚を作成できます。ただし、rectX/Y はグリッドの右/下に継続します (動きの錯覚を追加します)。

      // move the grid
      offsetX+=5;
      offsetY+=5;
      if(offsetX==20){offsetX=0;}
      if(offsetY==20){offsetY=0;}
      rectX+=5;
      rectY+=5;
      if(rectX==w){rectX=0;}
      if(rectY==h){rectY=0;}

最後に、グリッドを描画します。まず、キャンバスの端まで垂直線を引きます。次に横線。そして最後に、グリッドが 1 グリッド スクエア以上右/下に移動する視覚的錯覚を作成する赤い四角形を描画します。

      for(var x=offsetX;x<w;x+=20){
            ctx.moveTo(x,0);
            ctx.lineTo(x,h);    
      }
      // horizontal grid lines
      for(var y=offsetY;y<h;y+=20){
            ctx.moveTo(0,y);
            ctx.lineTo(w,y);    
      }
      // "moving" rect
      ctx.fillStyle="red";
      ctx.rect(rectX-4,rectY-4,8,8);

移動グリッドの目的に応じて、グリッドをより速くスムーズに通過させる方法があります。Loktar は、setInterval よりも優れた仕事をする requestAnimationFrame を使用して説明しました。本当に高速で滑らかにしたい場合は、すべてのグリッド線を再描画する代わりに、完全なグリッドの画像を保存してその画像を移動するだけです。再利用のために画像を保存することをキャッシュと呼びます。

キャンバスよりも幅が 1 マス広く、高さが 1 マス高いグリッドをキャッシュすると、ビジュアル イラストを再利用できます。特大のグリッドがキャンバスよりも左と上にぶら下がっている状態でアニメーションを開始します。次に、各アニメーション フレームで、グリッドを 1 ピクセル右/下に移動します。20px を超えると、キャッシュされた画像はキャンバスの左上に正確に配置されます。次に、キャッシュされたグリッドをキャンバスの左上の開始位置に移動します。そして、アニメーションを繰り返すだけです! 非常に速く、非常にスムーズです。

于 2013-03-28T22:02:37.483 に答える