javascript - HTML5 画布幻灯片

Question

我正在尝试使用 html5 画布制作幻灯片，并发现这是可行的。

有人知道如何摆脱困境吗？

  if (counter > maxNum) counter = 0;

而不是计数器= 0；我想摆脱这个循环，但我尝试过的所有事情都没有奏效。任何人的想法？

Answer 1

你试过break;吗？

if (counter > maxNum) {
    ...
    break;
}

编辑：您可能还想尝试return？

if (counter > maxNum) {
    ...
    return;
}

Answer 2

如果您查看绘图代码，您会看到：

this._draw = function() {

    //if the next image will cover the canvas
    //there is no real need to clear the canvas first.
    //I'll leave it here as you ask for this specifically
    ctx.clearRect(0, 0, myCanvas.width, myCanvas.height)
    ctx.drawImage(images[counter++], 0, 0);
    if (counter > maxNum) counter = 0;

    setTimeout(me._draw, 1000); //here we use me instead of this
}

问题是你那里没有循环所以break不起作用。

但是您可以替换if (counter > maxNum) counter = 0;（这会重置计数器）if (counter > maxNum) return;退出函数，这样setTimeout就不会被调用。