Canvas

De Wikilipo.

Voici un fichier html qui crée une une aiguille qui tourne. On peut le regarder ici : http://infolipo.net/cours/canvas/canvas.html

<html><head>
<!-- interdire de zoomer -->
<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>
<p>Voir aussi ce <a href="https://developer.mozilla.org/fr/Tutoriel_canvas">tutoriel</a></p>
</body>
Outils personnels