在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);