Question

我是新来的，试图让画布为我工作。我想制作一个canvasanimation，其中每2秒重绘一次圆圈，中间重置画布。圆圈应该随机出现（我设法开始工作），但我无法弄清楚如何让动画每2秒重复一次。我使用了requestAnimationFrame回调，但是每秒刷新60次。

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');

var requestAnimationFrame = window.requestAnimationFrame ||
                        window.mozRequestAnimationFrame ||
                        window.webkitRequestAnimationFrame ||
                        window.msRequestAnimationFrame;


function reset(){


draw();
requestAnimationFrame(reset);

 }


function draw(){

  var X = Math.floor(Math.random()*canvas.width);
  var Y = Math.floor(Math.random()*canvas.height);
  var radius = 70;

 context.clearRect(0,0, canvas.width, canvas.height);
  context.beginPath();
  context.arc(X, Y, radius, 0, 2 * Math.PI, false);
  context.fillStyle = 'red';
  context.fill();
}
function main(){

requestAnimationFrame(reset);
}

main();

我像你说的那样更新了代码，但是现在我每隔两秒就会得到一次圆圈，但是画布之间没有重置。

function main(){
setInterval(function(){
draw();
context.clearRect(0,0, 640,480)    ;
}

,2000);

};

我想我找到了它，或者至少是一种方法。我将你的答案与setTimeout函数结合起来。

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');


function draw() {
var X = Math.floor(Math.random() * canvas.width);
var Y = Math.floor(Math.random() * canvas.height);
var radius = 70;


context.beginPath();
context.arc(X, Y, radius, 0, 2 * Math.PI, false);
context.fillStyle = 'red';
context.fill();

}
;


function reset() {
canvas.width = canvas.width;

}

function action() {

draw();
setTimeout(function() {
    reset()
}, 2000);

}
;

function main() {
setInterval(function() {
    action();

}, 2200);
}





main();

Answer 1

您可以改为使用setInterval：

setInterval(function() {
  // draw the circle
  // reset
}, 2000);

Answer 2

您可以使用requestAnimationFrame提供给其动画功能的时间戳来将绘图限制为每秒1帧。

给定动画循环的时间戳，计算自上次绘制以来经过的毫秒数。如果没有经过1000毫秒，则什么也不做。如果已经过了1000ms，请执行draw（）并重置startTime以等待另一个1000ms过去。

示例代码和演示：http://jsfiddle.net/m1erickson/mwuc0tby/

var startTime;
var interval=1000;

requestAnimationFrame(animate);

function animate(t){
    requestAnimationFrame(animate);
    if(!startTime){startTime=t;}
    if(t-startTime<interval){return;}
    startTime=t;
    draw();
}

我建议使用requestAnimationFrame，因为它在资源和性能方面具有一些不错的内置效率。

在“画布”中重复绘制形状

2 个答案: