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(); 
});