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>

^{没有给出解释的道歉}

ʜᴀᴠᴇꜰᴜɴ：）

画布的动画循环不起作用

1 个答案: