在x秒后使圖像顯示在畫布上

Question

我想在5秒后畫一幅畫面到畫布上。 一旦它被繪制，我希望它在屏幕上向下移動一點然后停止。

有沒有辦法做到這一點？

這是我嘗試過的技術：

我使用圖像的簡單for循環和maxY屬性將圖像向下移動到畫布上。 然而，圖像直接出現，沒有5秒的延遲。

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
    }
}

根據需要調整。