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

HTML5多圈动画点击按钮

1 个答案: