初始延遲的Javascript畫布動畫

Question

我在我的畫布動畫中使用了requestAnimationFrame，但是我想在開始之前將動畫延遲3秒。我已經放置了

setTimeout(draw(), 3000); 

在我的代碼很多地方。一些在下面的代碼中的註釋指出：

MyApp.prototype._animation = function() { 

var cvs = document.querySelector("#animation"); 
var ctx = cvs.getContext("2d"); 

var canvasWidth = cvs.width; 
var canvasHeight = cvs.height; 

var requestAnimationFrame = window.requestAnimationFrame || 
         window.mozRequestAnimationFrame || 
         window.webkitRequestAnimationFrame || 
         window.msRequestAnimationFrame; 

var posX = 0; 
var posY = 0; 

// tried setTimeout here 

function draw() { 

    ctx.clearRect(0, 0, canvasWidth, canvasHeight); 

    ctx.fillRect(100+posX,0,7,canvasHeight); //pole 

    var instrument = new Path2D(); 
    instrument.moveTo(65+posX,50+posY); 
    instrument.lineTo(100+posX,50+posY); 
    instrument.lineTo(100+posX, 10+posY); 
    instrument.lineTo(65+posX, 10+posY); 
    instrument.arc(65+posX,30+posY, 20, Math.PI/2, 3*Math.PI/2, false); 
    instrument.closePath(); 

    var circle = new Path2D(); 
    circle.arc(65+posX, 30+posY, 15, 0, 2 * Math.PI, true); 

    ctx.globalCompositeOperation = "xor"; 

    ctx.fill(instrument); 
    ctx.fill(circle); 

    if (posY < 50){ 
     posY += 1; 
    } else { 
     posX += 1; 
    }; 

    if (posX > 200) { 
    return; 
    } 

    requestAnimationFrame(draw); 

} 

// tried setTimeout here 
draw(); 

}; 

我試圖找出如何使用的setTimeout在這種情況下，以延緩動畫的開始。

編輯：我想弄清楚在這個方法中放置setTimeout以便最初延遲動畫。

Answer 1

在你的腳本，你叫draw()的底部，替換成：

// Note: no parens in the draw 
window.setTimeout(draw,3000);