Question

我正在尝试学习2d画布动画，但无法弄清楚如何保持已创建的动画正在运行。

例如：在点击时我创建一个运行到屏幕左上角的圆圈，但是当我再次点击时，该动画被清除并且新的动画开始。我希望一次运行一个以上的圈子。

代码：

window.requestAnimFrame=(function(callback){
    return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(callback){
        window.setTimeout(callback,1000/60);
    };
})();

var can = $('canvas')[0],
    ctx = can.getContext('2d'),
    width = window.innerWidth,
    height = window.innerHeight-5,
    color = '';

can.width = width;
can.height = height;
can.addEventListener('click',randomColor);
can.addEventListener('click',animate);

var circle = {
    x:0,
    y:0,
    r:5,
    d:2*Math.PI,
    color:''
}

function drawCircle(){
    ctx.beginPath();
    ctx.arc(circle.x,circle.y,circle.r,0,circle.d,false);
    ctx.fillStyle = circle.color;
    ctx.fill();
}

function randomColor(){
    color = 'rgba('+Math.floor(Math.random()*255)+','+Math.floor(Math.random()*255)+','+Math.floor(Math.random()*255)+',1)';
}

function clear(){
    ctx.clearRect(0,0,can.width,can.height);
}

function animate(event,startTime){
    if(startTime==undefined){
        startTime = (new Date()).getTime();
    }
    circle.x = event.clientX;
    circle.y = event.clientY;
    circle.color = color;
    var time = (new Date()).getTime()-startTime;
    var speed = (300*time/1000);
    circle.x += speed;
    circle.y -= speed;
    if (circle.x+circle.r>width||circle.y<0||circle.y>height||circle.x<0) {
        return;
    }
    clear();
    drawCircle();
    requestAnimFrame(function(){
        animate(event,startTime);
    });
}

Answer 1

我不认为清除画布是个问题。

我将如何处理它：

将circle放入对象而不是变量。

现在创建一个新功能addCircle()，创建一个新的圆形对象，并将其添加到画布和圆圈列表中（您可以在此处使用drawCircle()功能）。

修改您的animate()功能，使其遍历新的圆圈列表，从而移动每个圆圈。

这至少应该让你走上正轨。

清除画布保存已在运行的动画

1 个答案: