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
| var debX = 0,
debY = 0,
rayon = 50,
count = -1,
nbrInc = 10,
angleDeb = 1.5 * Math.PI,
angleFin = angleDeb + ( 2.0 * Math.PI ),
incAngle = ( 2.0 * Math.PI ) / nbrInc,
oCompteur = document.getElementById('le_compteur'),
oCanvas = document.getElementById('le_canvas'),
context = null,
iTimer = null;
if( oCanvas.getContext ){
context = oCanvas.getContext('2d');
debX = oCanvas.width / 2;
debY = oCanvas.height / 2;
// definition trace
context.lineWidth = 10;
context.strokeStyle = '#FEFEFE';
context.lineCap = 'square';
// trace l'arc de fond
context.beginPath();
context.arc( debX, debY, rayon, angleDeb + ( nbrInc * incAngle ), angleDeb, true );
context.stroke();
// couleur pour la jauge
context.strokeStyle = '#87CEEB';
// lancement animation
iTimer = setInterval( function(){
if ( count < nbrInc ){
count ++;
oCompteur.innerHTML = count;
angleFin = angleDeb + ( count * incAngle );
context.beginPath();
context.arc( debX, debY, rayon, angleFin, angleDeb, true);
context.stroke();
} else {
clearInterval( iTimer );
}
}, 500);
} |
Partager