在給定的時間間隔內重新啓動html5動畫

Question

我有一個html5畫布，其中的某些東西在給定的時間內動畫。我想要做的是在一定的時間間隔內重複這些代碼（「重置並重新啓動」繪圖）。

var canvas = $("#paper")[0]; 
var c = canvas.getContext("2d"); 

var startX = 50; 
var startY = 50; 
var endX = 100; 
var endY = 100; 
var amount = 0; 
setInterval(function() { 
    amount += 0.05; // change to alter duration 
    if (amount > 1) amount = 1; 
    c.clearRect(0, 0, canvas.width, canvas.height); 
    c.strokeStyle = "black"; 
    c.moveTo(startX, startY); 
    // lerp : a + (b - a) * f 
    c.lineTo(startX + (endX - startX) * amount, 
      startY + (endY - startY) * amount); 
    c.stroke(); 
}, 30);​ 

Answer 1

將setInterval函數賦值給一個變量。然後你就可以清除它

var interval = setInterval(function() {});

clearInterval(interval);

在你的情況下（功能卡萊設置），你可以使用：

var interval = setInterval(setup, 30);

而當你想清楚它稱之爲：

clearInterval(interval)。