Canvas knob comment l'automatiser ?

Version imprimable

Bonjour à tous,

J'ai récemment codé une jauge circulaire avec canvas. J'ai limité de 1 à 30 l'input. J'ai modifié le .js pour se faire.

Maintenant mon problème c'est que j'aimerai que la jauge avance de 1 à 30 de façon automatique.

J'ai essayé de chercher avec la fonction onload, mais je n'arrive pas à l'intégrer.

Voici le résultat actuel :
http://www.monserrurierparis.com/test.php

mon code html:
Code:

1 2 3 4 5 <div style="display:inline;width:200px;height:200px;"> <canvas height="200px" width="200"></canvas> <input type="text" class="knob" value="1" max="30" min="1" data-fgcolor="#66EE66" data-angleoffset="180" data-width="150" style="width: 104px; height: 66px; position: absolute; vertical-align: middle; margin-top: 66px; margin-left: -152px; border: 0px none; background: none repeat scroll 0% 0% transparent; font: bold 40px Arial; text-align: center; color: rgb(102, 238, 102); padding: 0px;"> </div>
et ici pour ma feuille .js qui est hébergée sur mon site

Merci pour votre aide !

01/11/2012, 09h46
NoSmoking

Bonjour,
essaies de mettre un setInterval/setTimeout, dans lequel tu incrémentes ton INPUT et appel un Redraw du canvas.
01/11/2012, 18h55
olivierlam.fr

je vais me documenter. merci de ton aide !

tu peux peut être essayer de faire plus simple

exemple:

Code:

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
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<!DOCTYPE HTML>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>[Canvas] Compteur</title>
<style>
body {
  margin: 0px;
  padding: 0px;
  background:#EEEEEE;
}
#div_decompte{
  position:relative;
  text-align: center;
  width:200px;
  margin:100px auto;
}
#le_canvas{
  position: absolute;
  left:0;
  top:0;
}
#le_compteur{
  color: #87CEEB;
  font: bold 50px Arial;
  line-height:200px;
}
</style>
</head>
<body>
  <div id="div_decompte">
    <canvas id="le_canvas" width="200" height="200">Balise &lt;canvas&gt; non prise en compte</canvas>
    <span id="le_compteur" type="text">0</span>
  </div>
<script>
function initPage(){
  var debX, debY;
  var rayon = 50;
  var count = 0, nbrInc = 30;
  var angleFin, angleDeb = 1.5 * Math.PI;
  var incAngle = Math.PI /nbrInc;
  var context = null;
  var oCompteur = document.getElementById('le_compteur');
  var oCanvas = document.getElementById('le_canvas');
  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
    var 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);
  }
}
initPage();
</script>
</body>
</html>

et plus précis

Code:

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);
	}