为 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