[RESOLU] Faire varier une droite par le déplacement d'un curseur en JS
Publié : 31 Mai 2019 14:47
Bonjour,
je souhaites faire varier la pente d'une droite en déplaçant un curseur.
.... j'arrives à faire afficher un chiffre de 0 à 100 grâce à un curseur ... j'arrives à 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 :
Puis le script de la droite :
J'attends avec impatience 
toute aide (avec si possible en utilisant des mots pour débutants)
Cordialement
Christophe
je souhaites faire varier la pente d'une droite en déplaçant un curseur.
.... j'arrives à faire afficher un chiffre de 0 à 100 grâce à un curseur ... j'arrives à 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 : Tout sélectionner
<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>Code : Tout sélectionner
<HTML>
<canvas id="moncanevas" width="1200" height="220"></canvas>
<script type="text/javascript">
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>Cordialement
Christophe
