HTML5多圈動畫onclick按鈕

Question

當我在下面的代碼中點擊我的按鈕時，線性動畫出現在一個圓上。我怎樣才能把它帶到那個原始的圓圈繼續沿着它的路徑前進，並沿着同一條路徑與另一個圓圈開始一個新的動畫，我希望能夠多次這樣做，有時候我可能有10個左右。

當前當我多次單擊按鈕時，它會從畫布的開始處開始或在兩個動畫圓之間產生脈動。

$('#dSubmit').click(function(){ 

    var ctx; 
    var x = 15; 
    var y = 50; 
    var dx = 1; 
    var dy = 0; 
    var WIDTH; 
    var HEIGHT; 

    function init() { 
     ctx = $('#canvas')[0].getContext("2d"); 
     WIDTH = $("#canvas").width(); 
     HEIGHT = $("#canvas").height(); 
     return setInterval(draw, 10); 
    } 

    function circle(x,y,r) { 
    ctx.fillStyle = "#81cbf2"; 
     ctx.beginPath(); 
     ctx.arc(x, y, r, 0, Math.PI*2, true); 
     ctx.closePath(); 
     ctx.fill(); 
    } 

    function rect(x,y,w,h) { 
     ctx.beginPath(); 
     ctx.rect(x,y,w,h); 
     ctx.closePath(); 
     ctx.fill(); 
    } 

    function clear() { 
    ctx.clearRect(0, 0, WIDTH, HEIGHT); 
    } 

    function draw() { 
     clear(); 
     circle(x, y, 10); 

     x += dx; 
     y += dy; 
    } 

    init(); 
}); 

Answer 1

首先，這整個事情不應該包含在一個jQuery對象的點擊功能。它應該在外面。

其次，您不需要每次點擊都要製作新的間隔，也不需要繼續獲取尺寸。

三，表達的一些函數不需要做出。見下文。

最後，最大的問題是，你只有一個變量爲x和y。你需要跟蹤你想要創建的每個圓，所以你需要爲每個你想要初始化的新圓創建一個動態數組。

我會做這樣的代替：

var ctx; 
var x = []; 
var y = []; 
var dx = 1; 
var dy = 0; 
var WIDTH; 
var HEIGHT; 
var interval; 

function init() { 
    var theCanvas; 
    if(ctx === undefined) { //only need this once. 
     theCanvas = $('#canvas')[0]; 
     ctx = theCanvas.getContext("2d"); 
     WIDTH = theCanvas.width; 
     HEIGHT = theCanvas.height; 
     interval = setInterval(draw, 10); //Will start after init is completed 
    } 

    x.push(50); //Start a new path for the next circle: x = 50 
    y.push(15); //New path: y = 15 
} 

function circle(x, y, r) { 
    ctx.fillStyle = "#81cbf2"; 
    ctx.beginPath(); 
    ctx.arc(x, y, r, 0, Math.PI*2, true); 
    ctx.closePath(); 
    ctx.fill(); 
} 

//rect() isn't needed: ctx.fillRect(x, y, w, h) will do this for you. It's also not used. 
//Clear is not needed either. It only calls one function. 

function draw() { 
    var i = x.length; 
    ctx.clearRect(0, 0, WIDTH, HEIGHT); 

    while(i--) {  
     circle(x[i], y[i], 10); 
     x[i] += dx; 
     y[i] += dy; 
    } 
} 

$('#dSubmit').click(function(){ 
    init(); 
});