在 x 秒后使图像出现在 canvas 上

Question

我想在 5 秒后在 canvas 上绘制图像。绘制完成后，我希望它向下移动一点然后停止。

有什么办法吗？

这是我尝试过的技巧：

I have the image moving down the canvas using a simple for loop and maxY property of the image. However the image appears straight away without a delay of 5 seconds.

Answer 1

使用setTimeout函数，第二个参数表示你要找的延时，单位毫秒

window.setTimeout(function() { //do you work here }, 5000);

Answer 2

假设使用 onload 正确加载图像，您可以这样做：

var img = new Image();
img.onload = ready;
img.src = "...";

function ready() {
    var maxY = 200, y = 0;
    setTimeout(animate, 5000);                            // delay animation

    function animate() {
        ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
        ctx.drawImage(img, 0, y);
        y++;
        if (y < maxY) requestionAnimatinFrame(animate);  // continue until criteria
    }
}

根据需要进行调整。

在 x 秒后使图像出现在 canvas 上

Make an image appear on the canvas after x amount of seconds

html

javascript

animation

html5-canvas