使用請求動畫框在畫布中設置一個圓圈

Question

我正嘗試使用畫布和請求動畫框架在給定點集內創建一個圓。

對於我已經使用一個功能象下面這樣：

function animloop(){ 
    while(ny > pipeEnds.y) { 
     ctx.clearRect(0, 0, w, h); 
     drawCircle(nx, ny); 
     ny--; 
     nx = nx; 
    } 
    requestAnimFrame(animloop); 
} 

animloop(); 

function drawCircle(cx, cy){ 
    ctx.beginPath(); 
    ctx.arc(cx, cy, 2, 0, 2 * Math.PI, false); 
    ctx.fillStyle = "black"; 
    ctx.fill(); 
    ctx.closePath(); 
} 

給定的一組點內的圓移動，但動畫不能看到。 當頁面加載圓到達最終位置時。

該代碼可以查看in this fiddle。

Answer 1

只需更換while與if：

function animloop(){ 
    if (ny > pipeEnds.y) { 
     ... 

Modified fiddle here

什麼情況是，當你使用while要創建一個內部循環，這將無法完成，直到標準滿足意義直到這之後，纔會調用RAF，因爲在那個點上「移動」完成後沒有可見的移動。

使用if將檢查一次，然後調用rAF等。

希望這會有所幫助！