javascript - HTML 5 Canvas 元素无法在 .setInterval 方法中正确设置动画

Question

代码将使用其中一个“框”渲染动画，但是当在 setInterval 方法中绘制两个“框”时，行为会非常奇怪。我怀疑这可能与 ctx.clearRect 有关。

JS Fiddle

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext('2d');
var raf;
var switchDirection = [true, true];

function alien() {

  if (canvas.getContext) {

    function Spaceships(x) {
      this.x = x;
      this.y = 100;
      this.color = 'rgb(192, 192, 192)';

      this.draw = function() {
        ctx.beginPath();
        ctx.rect(this.x, this.y, 100, 100);
        ctx.closePath();
        ctx.fillStyle = this.color;
        ctx.fill();
      };
    };

    var alienOne = new Spaceships(100);
    var alienTwo = new Spaceships(500);

    alienOne.draw();
    alienTwo.draw();

    setInterval(function redraw() {

      if (alienOne.x == 200) {
        switchDirection[0] = false;
      } else if (alienOne.x == 100) {
        switchDirection[0] = true;
      }

      if (switchDirection[0] == true) {
        ctx.clearRect(0, 0, 0, 0);
        alienOne.draw();
        alienOne.x += 10;
      } else if (switchDirection[0] == false) {
        ctx.clearRect(0, 0, 0, 0);
        alienOne.draw();
        alienOne.x -= 10;
      }

      if (alienTwo.x == 600) {
        switchDirection[1] = false;
      } else if (alienTwo.x == 500) {
        switchDirection[1] = true;
      }

      if (switchDirection[1] == true) {
        ctx.beginPath();
        ctx.clearRect(0, 0, 0, 0);
        alienTwo.draw();
        alienTwo.x += 10;
      } else if (switchDirection[1] == false) {
        ctx.beginPath();
        ctx.clearRect(0, 0, 0, 0);
        alienTwo.draw();
        alienTwo.x -= 10;
      }

    }, 250);

  } else {
    alert('you need a better browser to play this game')
  }
};
alien();

我已经尝试将第二个框放在它自己的 .setInterval 中。 由于未正确调整其宽度，动画呈现不正确。

如有任何帮助，我们将不胜感激。

Answer 1

我解决了你的问题，并重构了你的一些代码:

• 主要问题是使用 clearRect 方法清除 Canvas 。您没有指定正确的参数值。
• 有些代码非常重复。现在这不是真正的问题，因为您只使用了 2 个外星人，但是一旦您有两个以上的外星人，这可能会成为一个问题。想象一下为 40 个外星人编写几乎相同的代码。这可以通过数组和 for 循环来解决。此外，您使用 bool 变量来确定何时从 alienX 中添加/减去。这也会变得很麻烦。现在，我们检查宇宙飞船何时超过/低于可容忍的 x 值，并相应地更改您的速度符号。
• 正如 @Kaiido 在上面的评论中提到的，您可以将 requestAnimationFrame 用于您的动画，这比 setInterval 更适合此元素。为了保持 断断续续 动画效果，我使用了一个非常基本的计数器，使用 % 运算符每秒仅执行一次代码每 4 次(通常，reqAnimFrame 回调每秒 60 次，因此 60/15 = 4，在您的示例中等于 250 毫秒)(见下文)。

代码:

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var aliens = [];
var counter = 0;

function alien() {

  if (canvas.getContext) {

    function Spaceships(x) {
      this.baseX = x; // added a baseX to remember where the spaceship started off
      this.x = x;
      this.y = 100;
      this.velocityX = 10;
      this.color = "rgb(192, 192, 192)";

      this.draw = function() {
        ctx.beginPath();
        ctx.rect(this.x, this.y, 100, 100);
        ctx.closePath();
        ctx.fillStyle = this.color;
        ctx.fill();
      }
    }

    aliens.push(new Spaceships(100), new Spaceships(500));
    drawAllAliens();

    function redraw() {

      requestAnimationFrame(redraw);

      var maxXDiff = 100; //choose how far or near your aliens/squares can go
      counter ++;

      // remainder/modulo operator: 
      // reduce animation to every 4x per sec for that "choppy" animation
      if(counter%15 === 0){
        for (var i = 0; i < aliens.length; i ++) {
          if ( ( (aliens[i].baseX + maxXDiff) < aliens[i].x ) || (aliens[i].baseX > aliens[i].x) ) {
            aliens[i].velocityX = -aliens[i].velocityX; // switches the sign
          }
          aliens[i].x += aliens[i].velocityX;
        }
      }

      drawAllAliens();
    }

    redraw();

    function drawAllAliens() {
      ctx.clearRect(0,0,canvas.width,canvas.height);

      for (var i = 0; i < aliens.length; i++) {
        aliens[i].draw();
      }
    }

  } else {
    alert("you need a better browser to play this game");
  }
}

alien();