I'm trying to animate canvas using for loop and setInterval, but no luck so far... Here's what I have in my code:
//loop function
function loop(){
var dynamic = 0;
var v = 10;
var x, y;
for (dynamic = 0; dynamic < v; dynamic++) {
x = dynamic * 1;
y = dynamic * 1;
c.clearRect(0, 0, 350, 350);
c.fillStyle = '#87CEEB';
c.beginPath();
c.arc(x, y, 10, 0, Math.PI*2, false);
c.fill();
}
}
setInterval(loop, 20);
Thanks so much in advance!
I'm trying to animate canvas using for loop and setInterval, but no luck so far... Here's what I have in my code:
//loop function
function loop(){
var dynamic = 0;
var v = 10;
var x, y;
for (dynamic = 0; dynamic < v; dynamic++) {
x = dynamic * 1;
y = dynamic * 1;
c.clearRect(0, 0, 350, 350);
c.fillStyle = '#87CEEB';
c.beginPath();
c.arc(x, y, 10, 0, Math.PI*2, false);
c.fill();
}
}
setInterval(loop, 20);
Thanks so much in advance!
Share Improve this question edited Jan 17, 2014 at 15:40 Jaak Kütt 2,6564 gold badges33 silver badges40 bronze badges asked Feb 25, 2013 at 16:02 shibalinkshibalink 1392 gold badges3 silver badges9 bronze badges 1-
You're running through the entire animation loop every time
loop()executes. All you'll see is the last frame of the animation. You need to execute the body of the loop only once each time thesetInterval()timer fires. – Ted Hopp Commented Feb 25, 2013 at 16:17
2 Answers
Reset to default 1As said before: move your dynamic out of the animation loop and change dynamic inside the loop.
A summary of animation is this:
Set your starting variables (like dynamic) outside your for loop
Inside the animation loop() you want to animate the canvas by 1 move (not many moves), like this:
+ Increment your dynamic variable to induce motion. + Set your x & y to reflect the changes to dynamic. + Clear the canvas to prepare for this animation frame + Draw stuff!After the loop, start the animation with setInterval()
If you animation runs off the screen, you might as well turn it off!
Here is some code and a Fiddle: http://jsfiddle/m1erickson/fFfRS/
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery./jquery.min.js"></script>
<style>
body{ background-color: ivory; }
canvas{border:1px solid red;}
</style>
<script>
$(function(){
var canvas=document.getElementById("canvas");
var c=canvas.getContext("2d");
// set the dynamic outside the loop
var dynamic = 10;
var x;
var y;
//loop function
function loop(){
// change dynamic
dynamic=dynamic*1.1;
x = dynamic;
y = dynamic*1.2;
// stop the the animation if it runs out-of-canvas
if (x>canvas.width || y>canvas.height){
c.clearRect(0,0,canvas.width,canvas.height);
clearInterval(myTimer);
alert("animation done!");
}
// clear the canvas for this loop's animation
c.clearRect(0,0,canvas.width,canvas.height);
c.fillStyle = '#87CEEB';
// draw
c.beginPath();
c.arc(x,y, 10, 0, Math.PI*2, false);
c.fill();
}
var myTimer=setInterval(loop,20);
}); // end $(function(){});
</script>
</head>
<body>
<canvas id="canvas" width=400 height=400></canvas>
</body>
</html>
Maybe you should move the dynamic variable to the outside? You seem to draw the circle at the same point every loop.
var dynamic = 0;
//loop function
function loop(){
var v = 10;
var x, y;
x = dynamic * 1;
y = dynamic * 1;
c.clearRect(0,0, 350,350);
c.fillStyle = '#87CEEB';
c.beginPath();
c.arc(x,y, 10, 0, Math.PI*2, false);
c.fill();
++dynamic;
}
setInterval(loop,20);