在画布上重复绘制形状 [英] Drawing a shape in Canvas on repeat

问题描述

我是新来的，正在尝试让画布为我工作。我想作一个画布动画，每隔2秒重画一个圆圈，并在其间重置画布。圆圈应该随机出现在里面（我设法开始工作了），但是我不知道如何让动画每2秒重复一次。我使用了requestAnimationFrame回调，但是每秒刷新60次。

I'm new here and trying to get canvas to work for me. I wanted to make a canvasanimation where a circle was redrawn every 2 seconds with a canvas reset in between. The circle should appear randomly within(which i managed to get to work) but i cant figure out how to get the animation to repeat itself every 2 seconds. I used the requestAnimationFrame callback, but this refreshes like 60 times a second.

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

我更新了代码，就像您说的那样，但是现在我每两秒钟得到一个圆圈，但是画布是

I updated the code like you said, but now i get circles every two seconds, but the canvas is not resetting in between.

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

,2000);

};

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

I think I found it, or at least a way to do it. I combined your answer with a setTimeout function.

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

推荐答案

您可以使用 requestAnimationFrame 馈入其动画功能，以将绘图速度限制为每秒1帧。

You can use the timestamp that requestAnimationFrame feeds to its animation function to throttle the drawing to 1 frame-per-second.

鉴于将时间戳添加到动画循环中，计算自上次绘制以来经过的毫秒数。如果尚未经过1000毫秒，则什么也不做。如果经过了1000毫秒，请执行draw（）并重置startTime以等待另外的1000毫秒。

Given the timestamp fed into your animation loop, calculate the milliseconds that have elapsed since the last draw. If 1000ms haven't elapsed, do nothing. If 1000ms have elapsed, do the draw() and reset the startTime to wait for another 1000ms to elapse.

示例代码和演示： 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，因为它在术语方面具有一些不错的内置效率资源和性能。

I suggest using requestAnimationFrame because it comes with some nice built-in efficiencies in terms of resources and performance.

这篇关于在画布上重复绘制形状的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！