我试图让画布中的图像使用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
答案 0 :(得分:4)
您的代码是无限循环的。
每次加载图片时,它都会运行'start'功能;但是,该函数会更改图像URL,因此会再次加载,这会运行“启动”功能等。
我通过制作多个图片而不是仅使用一个图像来运行代码;这样,Image就不会不断重新加载。
值得注意的变化是添加'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];