HTML5 多圈动画 onclick of Button

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 对象的 click 函数中。它应该在外面。

第二，你不需要每次点击都创建新的区间，也不需要一直获取维度。

第三，有些表达的功能是不需要做的。见下文。

最后，最大的问题是 x 和 y 只有一个变量。您需要跟踪要创建的每个圆圈，因此您需要为要初始化的每个新圆圈创建 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();
});