如何使用setInterval動畫畫布

我試圖使用畫布庫繪製弧線。我得到要繪製的第一個藍色圓弧，但是在setInterval內部沒有發生任何事情（與setTimeout具有相同的行爲）。我如何使用Canvas動態構建東西？如何使用setInterval動畫畫布

這裏是我的代碼：

var canvas = Canvas.createView(); 

canvas.begin(); 

canvas.arc(120, 120, 50, 0 * Math.PI, 2 * Math.PI, 0); 
canvas.lineWidth(10); 
canvas.strokeStyle('blue'); 
canvas.stroke(); 

var pointFrom = 1.5; 

var interval = setInterval(function() { 
    var pointTo = pointFrom - 0.5; 

    console.log('pointFrom : ' + pointFrom); 
    console.log('pointTo : ' + pointTo); 
    canvas.arc(120, 120, 50, pointFrom * Math.PI, pointTo * Math.PI, 1); 
    canvas.lineWidth(15); 
    canvas.strokeStyle('red'); 
    canvas.stroke(); 

    pointFrom = pointTo; 

    if (pointFrom < 0) clearInterval(interval); 
}, 2000); 

my_view.add(canvas); 

Thanks

來源

2013-10-17 Vincent Peres

是'if（point from＃< 0）'您的實際代碼還是隻是一個複製/粘貼錯誤？ – mwfire

'console.log'？爲什麼不''Ti.API.info' –

@JosiahHester我從本地工作，不介意console.log（但它工作）:) –

的

canvas.begin() 
canvas.arc(120, 120, 50, pointFrom * Math.PI, pointTo * Math.PI, 1) 
canvas.stroke() 
canvas.commit()

必須在間隔功能。

來源

2014-02-24 00:43:14

如何使用setInterval動畫畫布

回答

相關問題