在x秒的時間後在畫布上顯示圖像

Question

我想在5秒後畫一幅圖像到畫布上。一旦它被吸引，我希望它稍微向下移動屏幕，然後停下來。

有沒有辦法做到這一點？

這裏是我試過的技術：

我有圖像向下移動使用一個簡單的for循環和圖像的 美星物業畫布。然而，圖像直接顯示 沒有延遲5秒。

Answer 1

假設圖像尋找延遲使用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 
    } 
} 

調整如所須。

Answer 2

使用setTimeout函數，第二個參數代表你以毫秒爲單位

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