Question

我最近一直在用帆布搞乱，我遇到了一个我无法克服的障碍。我学会了如何创建形状，为它们设置动画，并在整个画布中循环相同的形状（无论是x还是y）。这很难解释，但我无法弄清楚如何在一段时间后在第一个后面产生另一个形状。我希望它几乎是一个横向移动的正方形网格。

我想找到一些方法将整个for循环与形状的代码放入变量然后使setTimeout()在一定的毫秒之后再次产生整个事物，但我不是＆＃ 39;不知道这是否有用。

＆＃13;

    function draw(x,y) {
      // Put canvas in variable
      var canvas = document.getElementById('canvas');
      // Enable drawing
      var ctx = canvas.getContext('2d');
      // Start drawing
     ctx.save();
     ctx.clearRect(0, 0, 550, 400);

    for(var i = 0 ; i < 400 ; i+=10){
     ctx.fillStyle = "rgb(0, 200, 0)";
     ctx.fillRect(x, i, 5, 4);
    }
     ctx.restore();
     x += 0.3;
     var loopTimer = setTimeout('draw('+x+', '+y+')', 0.1);
    }

    draw(0,0);

＆＃13;

canvas {
  margin-left: 200px;
  width: 550px;
  height: 400px;
  border: 1px solid #111111;
}

＆＃13;

<canvas id="canvas"></canvas>

＆＃13;

Answer 1

您可能想要创建一个方形类，以便您可以动态创建新对象。

function squareClass () {

  //Position
  this.X = 0;
  this.Y = 0;

  //Size
  this.width = 5;
  this.height = 4;

  //Color to render
  this.color = "rgb(0, 200, 0)";

  //Move square
  this.move = function() { this.X += 0.3; }

  //Draw square
  this.draw = function() {

    ctx.fillStyle = this.color;
    ctx.fillRect(this.X, this.Y, this.width, this.height);
  }
}

现在你可以使用方形类来创建你需要的所有方块。

var squareList = [];

function createASqaure() {

  squareList.push(new squareClass());
}

调用createASquare类将产生新的正方形。

为了使用方块内部的函数，你可以简单地遍历squareList数组并调用这样的函数

function moveAndDraw() {

  for (var i = 0; i < squareList.length; i++) {

    squareList[i].move();
    squareList[i].draw();
  }
}

如何使用画布创建一个动画形状的永恒循环？

1 个答案: