Canvas
Aller à la navigation
Aller à la recherche
Ce fichier html crée une une aiguille qui tourne. On peut le regarder ici: http://infolipo.net/cours/canvas/canvas.html <source lang="html5"> <html><head> <meta name="viewport"
content="width=device-width, initial-scale=1.0, user-scalable=no">
<script type="text/javascript">
function start(){
var exemple = document.getElementById('exemple');
// angle de l'aiguille
var angle_en_degres = 0;
function dessineImage(){
// on change l'angle
angle_en_degres = angle_en_degres + 2;
var angle_en_radians = angle_en_degres * Math.PI/180;
dessineAiguille(angle_en_radians);
}
// executer 60 fois par seconde dessineImage setInterval(dessineImage,1000/60);
/* une autre manière de faire
function dessineAvecTimeout(){
setTimeout(dessineAvecTimeout,1000/60);
dessineImage();
}
dessineAvecTimeout();
*/
}
function dessineAiguille(rotation){
var exemple = document.getElementById('exemple');
var contexte = exemple.getContext('2d');
// on enlève tout ce qui est dessiné contexte.clearRect(0,0,exemple.width,exemple.height);
// on enregistre l'état du canvas // pour pouvoir y retourner après contexte.save();
// on se place au centre du canvas contexte.translate(exemple.width/2,exemple.height/2); // on dessine un rectangle au centre contexte.fillRect(-5, -5, 10, 10); // on tourne le canvas contexte.rotate(rotation); // on dessine l'aiguille // on commence un chemin contexte.beginPath(); // on se déplace au centre contexte.moveTo(0,0); // on tire un trait de 50 pixels vers la droite contexte.lineTo(0, 50); // on termine le chemin contexte.closePath(); // on dessine le chemin contexte.stroke();
// on dessine un rectangle de 10 pixels de coté // à une hauteur de -5 pour qu'il soit centré // et 50 pixels vers la droite pour qu'il soit // au bout de l'aiguille contexte.fillRect(-5, 50, 10, 10);
// on remet le canvas dans son état de départ // sans translation ni rotation contexte.restore();
} </script> </head> <body onload="start();"> <canvas id="exemple" width="200" height="200">
Affichage d'un texte pour les navigateurs qui ne supportent pas canvas.
</canvas>
Voir aussi ce <a href="https://developer.mozilla.org/fr/Tutoriel_canvas">tutoriel</a>
</body> </source>