javascript - Canvas 动画循环不起作用

Question

我想要一个总是有相同动画的循环。但是如果有人可以帮助我，它就不起作用，我会非常高兴。现在详细说明，以便动画运行一次然后停止。但是动画应该在第一次运行后再运行一次，然后再运行一次，依此类推。

console.log("Start");
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d'); //ctx = contex
var img = new Image();
img.src = "../img/cookie.png";


canvas.width = canvas.scrollWidth;
canvas.height = canvas.scrollHeight;

console.log("Loaded image");
var add = 10;

onload = function Hallo() {
    if (add == 500) {
        console.log("resetet")

        ctx.clearRect(0, 0, canvas.width, canvas.height);

        ctx.beginPath();
        ctx.rect(0, 0, 1000, 1000);
        ctx.fillStyle = "lightblue";
        ctx.fill();

        ctx.drawImage(img, 0, 0, 100, 100);
        ctx.drawImage(img, 100, 0, 100, 100);
        ctx.drawImage(img, 200, 0, 100, 100);
        ctx.drawImage(img, 300, 0, 100, 100);
        ctx.drawImage(img, 400, 0, 100, 100);
        ctx.drawImage(img, 500, 0, 100, 100);
        ctx.drawImage(img, 600, 0, 100, 100);
        ctx.drawImage(img, 700, 0, 100, 100);

    } else {
        console.log("Animation beginnt")

        ctx.clearRect(0, 0, canvas.width, canvas.height);

        ctx.beginPath();
        ctx.rect(0, 0, 1000, 1000);
        ctx.fillStyle = "lightblue";
        ctx.fill();

        ctx.drawImage(img, 0, add, 100, 100);
        ctx.drawImage(img, 100, add, 100, 100);
        ctx.drawImage(img, 200, add, 100, 100);
        ctx.drawImage(img, 300, add, 100, 100);
        ctx.drawImage(img, 400, add, 100, 100);
        ctx.drawImage(img, 500, add, 100, 100);
        ctx.drawImage(img, 600, add, 100, 100);
        ctx.drawImage(img, 700, add, 100, 100);

        add++;
        window.requestAnimationFrame(Hallo);
    }
}
window.requestAnimationFrame(Hallo);

Answer 1

您的代码有很多问题。这是应该如何完成的...

console.log("Start");
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d'); //ctx = contex

canvas.width = canvas.scrollWidth;
canvas.height = canvas.scrollHeight;
var add = 10;

var img = new Image();

img.onload = function() {
   console.log("Loaded image");
   Hallo();
};

img.src = "http://lorempixel.com/100/100";

function Hallo() {
   if (add == 500) {

      add = 10; // need to reset add's value

      console.log("resetet");

      ctx.clearRect(0, 0, canvas.width, canvas.height);

      ctx.beginPath();
      ctx.rect(0, 0, 1000, 1000);
      ctx.fillStyle = "lightblue";
      ctx.fill();

      ctx.drawImage(img, 0, 0, 100, 100);
      ctx.drawImage(img, 100, 0, 100, 100);
      ctx.drawImage(img, 200, 0, 100, 100);
      ctx.drawImage(img, 300, 0, 100, 100);
      ctx.drawImage(img, 400, 0, 100, 100);
      ctx.drawImage(img, 500, 0, 100, 100);
      ctx.drawImage(img, 600, 0, 100, 100);
      ctx.drawImage(img, 700, 0, 100, 100);



   } else {
      console.log("Animation begining");

      ctx.clearRect(0, 0, canvas.width, canvas.height);

      ctx.beginPath();
      ctx.rect(0, 0, 1000, 1000);
      ctx.fillStyle = "lightblue";
      ctx.fill();

      ctx.drawImage(img, 0, add, 100, 100);
      ctx.drawImage(img, 100, add, 100, 100);
      ctx.drawImage(img, 200, add, 100, 100);
      ctx.drawImage(img, 300, add, 100, 100);
      ctx.drawImage(img, 400, add, 100, 100);
      ctx.drawImage(img, 500, add, 100, 100);
      ctx.drawImage(img, 600, add, 100, 100);
      ctx.drawImage(img, 700, add, 100, 100);

      add++;
   }

   requestAnimationFrame(Hallo); // need to call this here
}

<canvas id="canvas" width="800" height="600"></canvas>

^{抱歉没有给出解释}

ʜᴀᴠᴇ ꜰᴜɴ:)