1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64
|
<html>
<body>
</body>
<script src="Sprite.js"></script>
<script>
var htmlElement = document.getElementsByTagName('html')[0];
htmlElement.style.overflow = 'hidden'; //suppression des ascenseurs de la page html
var angle=-5;
var x=0;
var w=window.innerWidth;
var retour=false;
const R=100;
const penw=5; //epaisseur du pen
const ow=2*R+2*penw; //taille en largeur et hauteur du canvas de la roue
var fond=new Sprite("canvas",undefined,0,100,w,400,"none",0);
//dessin du sol
fond.graphics.strokeStyle ="#000000"; //with (fond.graphics)
fond.graphics.lineWidth = "5"; //{
fond.graphics.beginPath(); // .....
fond.graphics.moveTo(0,50+2*R+2*penw); //} ne fonctionne pas (?)
fond.graphics.lineTo(w,50+2*R+2*penw);
fond.graphics.stroke();
var roue=new Sprite("canvas",undefined,0,150,ow,ow,"none",1);
//dessin d'une roue
roue.graphics.strokeStyle ="#000000";
roue.graphics.lineWidth = "5";
roue.graphics.beginPath();
roue.graphics.moveTo(ow/2,penw);
roue.graphics.lineTo(ow/2,2*R+penw);
roue.graphics.moveTo(penw,ow/2);
roue.graphics.lineTo(2*R+penw,ow/2);
roue.graphics.arc(ow/2,ow/2,R,0,2*Math.PI);
roue.graphics.stroke();
window.requestAnimFrame = (function(){
return window.requestAnimationFrame || // La forme standardisée
window.webkitRequestAnimationFrame || // Pour Chrome et Safari
window.mozRequestAnimationFrame || // Pour Firefox
window.oRequestAnimationFrame || // Pour Opera
window.msRequestAnimationFrame || // Pour Internet Explorer
function(callback){
window.setTimeout(callback, 1000 / 60);
}
})();
function render() { // là au moins on n'a plus besoin de redessiner et de faire des clear à chaque fois
if (retour) angle-=2; else angle+=2;
if (x>w-2*R) retour=true; else if (x<0) retour=false;
x=R*angle*Math.PI/180;
roue.move(x,0,angle); //il vaut mieux faire plusieurs méthodes en fonction des besoins car ici translateY est appelée à chaque fois pour rien...
window.requestAnimFrame(render);
}
render();
</script>
</html> |
Partager