Pages dynamiques javascript

D Pages dynamiques javascript

D.1 Page HTML

Voici un exemple de page HTML5 utilisant des canvas pour afficher des disques dont la couleur peut être modifiée par un simple clic. Cette page utilise un script javascript disque.js présenté plus loin.

<!DOCTYPE html>
<html>
  <head> <title>LEDs</title> </head>
  <body onload="dessinDisques();">
  <script language="javascript" src="disques.js"> </script>
  <canvas id="led0" width="20" height="20" onclick="changeCouleur(0);"></canvas>
  <canvas id="led1" width="20" height="20" onclick="changeCouleur(1);"></canvas>
  <canvas id="led2" width="20" height="20" onclick="changeCouleur(2);"></canvas>
  <canvas id="led3" width="20" height="20" onclick="changeCouleur(3);"></canvas>
  </body>
</html>

D.2 Script javascript

Voici le script javascript utilisé par la page HTML5 précédente. Les dessins sont effectués en utilisant la technologie des canvas.

// Constantes
var TAILLE=20;
var DECALAGE=5;
var SPECULAIRE=3;

// Variables globales
var couleurs=['green','green','green','green'];

// Fonction de dessin de disque
function dessinDisque(id){
/* Récupération du canvas */
var canvas=document.getElementById('led'+id);
var context=canvas.getContext('2d');
/* Création d'un dégradé de couleur */
var gradient=context.createRadialGradient(
  TAILLE/2-DECALAGE,TAILLE/2-DECALAGE,SPECULAIRE,
  TAILLE/2-DECALAGE,TAILLE/2-DECALAGE,TAILLE+DECALAGE);
gradient.addColorStop(0,'white');
gradient.addColorStop(0.75,couleurs[id]);
/* Dessin du disque */
context.beginPath();
context.arc(TAILLE/2,TAILLE/2,TAILLE/2,0,2*Math.PI,false);
context.fillStyle=gradient;
context.fill();
/* Tracage du cercle pour lissage */
context.strokeStyle='white';
context.lineWidth = 2;
context.stroke();
}

// Fonction de dessin des disques
function dessinDisques(){
var i;
for(i=0;i<4;i++) dessinDisque(i);
}

// Fonction de modification de couleurs
function changeCouleur(id){
if(couleurs[id]=='green'){couleurs[id]='red';}
else{couleurs[id]='green';}
dessinDisque(id);
}