使用 setInterval 来回移动 canvas 图像

Question

我正在尝试让 canvas 中的图像使用 setInterval 来回移动。我一直在努力寻找解决方案但无济于事。谁能找出问题所在？这是我的代码：

...

var img = new Image;
var url = ["sprite-right.png","sprite-left.png"];
var ctx2;

for (i=0; i<3; i++) {
    img.src = url[i];
}

img.onload = function() {
    start();
}

function start() {
    var canv2 = document.getElementById("canvas2");
    ctx2 = canv2.getContext("2d");
    var x = 50, y = 100;
    var direction = "right";
    var interval = setInterval(function() {
    if (direction == "right") {
        img.src=url[0];
        ctx2.clearRect(0, 0, ctx2.canvas.width, ctx2.canvas.height);
        ctx2.drawImage(img, x, y);
        x++;
        if (x>690) {
            direction = "left";
            } // end if
    } else if (direction == "left") {
        img.src=url[1];
        ctx2.clearRect(0, 0, ctx2.canvas.width, ctx2.canvas.height);
        ctx2.drawImage(img, x, y);
        x--;
        if (x<50) {
            direction = "right";
            } // end if
        } // end if
        },1); // end set interval
} // end function

Answer 1

你的代码是无限循环的。

(Working plunkr)

每次加载图像时，它都会运行 'start' 函数；但是，该函数会更改图像 url，因此它会再次加载，从而运行 'start' 函数等

我通过制作多张图片而不是只使用一张图片得到了你的代码运行；这样，图像就不会不断地重新加载。

显着的变化是添加了 'img2' 变量并重新排序了代码；其他一切都很好。

var img = new Image(),
img2 = new Image();
var url = ["https://www.google.com/images/srpr/logo11w.png","http://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Smiley.svg/220px-Smiley.svg.png"];
var ctx2;

function start() {
  console.log('whirrr');
    var canv2 = document.getElementById("canvas2");
    ctx2 = canv2.getContext("2d");
    var x = 50, y = 100;
    var direction = "right";
    var interval = setInterval(function() {
    if (direction == "right") {
        //img.src=url[0];
        ctx2.clearRect(0, 0, ctx2.canvas.width, ctx2.canvas.height);
        ctx2.drawImage(img, x, y);
        x++;
        if (x>690) {
            direction = "left";
            } // end if
    } else if (direction == "left") {
        //img.src=url[1];
        ctx2.clearRect(0, 0, ctx2.canvas.width, ctx2.canvas.height);
        ctx2.drawImage(img2, x, y);
        x--;
        if (x<50) {
            direction = "right";
            } // end if
        } // end if
        },1); // end set interval
} // end function

img.onload = function() {
    start();
}

//for (i=0; i<3; i++) {
//    img.src = url[i];
//}
img.src = url[0];
img2.src = url[1];

使用 setInterval 来回移动 canvas 图像

Move a canvas image back and forth using setInterval

javascript

canvas

setinterval