Bonjour,
je souhaites faire varier la pente d'une droite en déplaçant un curseur.
.... j’arrive à faire afficher un chiffre de 0 à 100 grâce à un curseur ... j’arrive à faire afficher ma droite, .... mais je n'arrive pas à faire les deux dans la même page.
Bref je n'arrives pas à faire passer d'un script à l'autre le contenu de la variable "var droite".
Je vous mets d'abord le script du curseur :
Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16 CODE : <HTML> <!-- curseur --> <form action="input-type-range-min-max.php" method="post"> <input type="range" id="champ" name="range" value="5" min="0" max="100" step="5"> </form> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> <script type="text/javascript"> // affichage de la variable $(function() { $("#champ").after('<output></output>'); $("#champ").live('change', function() { var droite = $(this).val(); $('output').text(droite); } ); }); </script> </html>
Puis le script de la droite :
Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22 <HTML> <canvas id="moncanevas" width="1200" height="220"></canvas> <script type="text/javascript"> // Variable qui devrait provenir du "curseur" var droite = 10 ; // Tracé de la droite canvas = document.getElementById("moncanevas"); if (canvas.getContext) { context = canvas.getContext('2d'); } function drawLine() { context.strokeStyle='green'; context.lineCap='round'; context.lineWidth=4; context.moveTo(310,190); context.lineTo(690,droite); context.stroke(); } drawLine(); </script> </body> </html>
J'attends avec impatience toute aide (avec si possible en utilisant des mots pour débutants)
Cordialement
Goups
Partager