RequestAnimationFrame

anewa -  
 anewa -
Salut,
je me mets à l'animation sur CANVAS et je n'ai pas compris comment fonctionne requestAnimationFrame
quelqu'un a une idée e ce qui va pas dans mon script? Pour tester je veux animer déplacer un rectangle. 

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<style>
canvas{border:1px solid red;}
</style>
<title>
WebVaders
</title>
</head>
<body>
<section>
<canvas id="aff" WIDTH="640" HEIGHT="480">
</canvas>
</section>
<script>
var originex=0;
var originey=0;
var aff=document.getElementById('aff');
var ctx=aff.getContext('2d');


var squaredo=function(ox,oy){
ctx.save();
ctx.fillStyle="lime";
ctx.fillRect(ox,oy,ox+10,oy+5);
ctx.restore();
//-- incrémente/déplace le dessin
ox+=10;
oy+=5;
}

var mainloop=function(){
ctx.clearRect(0,0,640,480);
squaredo();
requestAnimationFrame(mainloop);
}

requestAnimationFrame(mainloop);


</script>
</body>
<html>


Pas de rectangle qui se déplace ... qu'est que j'ai loupé?
merci :)

1 réponse

  1. anewa
     
    euh pardon j'ai ça comme code en fait(peu pas éditer): 
    <!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<style>
canvas{border:1px solid red;}
</style>
<title>
WebVaders
</title>
</head>
<body>
<section>
<canvas id="aff" WIDTH="640" HEIGHT="480">
</canvas>
</section>
<script>
var originex=0;
var originey=0;
var aff=document.getElementById('aff');
var ctx=aff.getContext('2d');


var squaredo=function(){
ctx.save();
ctx.fillStyle="lime";
ctx.fillRect(originex,originey,originex+10,originey+5);
ctx.restore();
//-- incrémente/déplace le dessin
originex+=10;
originey+=5;
}

var mainloop=function(){
ctx.clearRect(0,0,640,480);
squaredo();
requestAnimationFrame(mainloop);
}

requestAnimationFrame(mainloop);


</script>
</body>
<html>


    Mais je ne comprends pas pourquoi j'ai un rctangle qui change de taille...
    0