為 HTML5 循環網格？

Question

我為我的背景制作了一個網格。 我能夠使用 X 和 Y 上的 for 循環繪制一個正方形來制作網格。

有沒有辦法在兩個軸上使用 +=1 為網格設置動畫以在 x 和 y 上移動？

我正在考慮將網格作為一個大層的父級並為該層設置動畫，而不是為每個方塊設置動畫。

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

編輯：我試圖找出使用 context.translate。 但是每秒的每個間隔（假設 setInterval 的毫秒為 1000），它會將值加倍。

Answer 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 offsetX=0;
    var offsetY=0;
    var rectX=0;
    var rectY=0;

然后 setInterval 是一個循環，每 100 毫秒調用一次 drawGrid()。

順便說一句，Loktar 是完全正確的，除了快速測試之外，您將需要使用 requestAnimationFrame 而不是 setInterval。 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 使用 requestAnimationFrame 進行了描述，它比 setInterval 做得更好。 如果您想要真正快速和流暢，您可以簡單地保存完整網格的圖像並移動該圖像，而不是重新繪制所有網格線。 保存圖像以供重用稱為緩存。

如果您緩存一個比畫布寬 1 個正方形、高 1 個正方形的網格，您可以重復使用我們的視覺幻覺。 您將開始使用超大網格懸掛在畫布左側和頂部的動畫。 然后對於每個動畫幀，您將向右/向下移動網格 1px。 在 20px 之后，緩存的圖像將與畫布的頂部/左側完全對齊。 然后您只需將緩存的網格移動到畫布左側和頂部的起始位置。 然后只需重復動畫！ 非常快，非常流暢。

為 HTML5 循環網格？

問題描述

1 個解決方案

解決方案1
2 已采納 2013-03-28 22:02:37

為 HTML5 循環網格？

問題描述

1 個解決方案

解決方案1 2 已采納 2013-03-28 22:02:37

解決方案1
2 已采納 2013-03-28 22:02:37