Compléments au script : dessin de la rampe de tir
Attention, votre navigateur ne supporte pas le javascript ou celui-ci à été désactivé. Certaines fonctionnalitées dynamiques de ce module sont restreintes.
Afin de visualiser le point de tir, vous allez dessiner une rampe de tir, modélisée par un segment d'épaisseur 5 et de longueur 10. Ce segment devra avoir sa base positionnée sur l'axe vertical, à la hauteur définie par l'entrée input. Il sera incliné selon l'angle de lancement.
Ce segment sera dessiné dans le "dessin".
Seul un extrait du script est représenté dans le texte à trou.
L'angle alpha est rentrée en degrés. Les calculs en javascript s'effectuent en radian, il est nécessaire d'effectuer la conversion.
<!DOCTYPE HTML>
<html lang = "fr">
<head>
<title>modéliser tir</title>
<link rel="stylesheet" media="screen" href="styles.css" type="text/css">
<meta charset = "utf-8" />
</head>
<body>
<canvas id = "schema" height = "300" width = "600" style="border:1px solid">Votre navigateur ne supporte pas la balise canvas</canvas><br/>
Vitesse lancement <input type="range" id="Vi" min="50" max="200" step="10" value="50"> cm/s<br/>
Angle de lancement<input type="range" id="alpha" min="-90" max="90" step="1" value="45">°<br/>
Hauteur lancement <input type="range" id="hauteur" min="0" max="250" step="10" value="100">cm<br/>
<script>
var zone_dessin = document.getElementById("schema");
var tir = zone_dessin.getContext('2d');
var intervalle=setInterval(dessin,30);
function dessin() {
tir.clearRect(0,0,600,300);
var hauteur=document.getElementById('hauteur');
var alpha=document.getElementById('alpha');
tir.beginPath();
tir.lineWidth="5";
tir.moveTo(10,290-hauteur.value);
tir.lineTo(10+10*Math.cos(2*Math.PI*alpha.value/360),290-hauteur.value-10*Math.sin(2*Math.PI*alpha.value/360));
tir.stroke();
tir.fillStyle="green";
tir.fillRect(400,270,20,20);
tir.beginPath();
tir.lineWidth="1";
tir.strokeStyle="black";
tir.moveTo(0,290);
tir.lineTo(600,290);
tir.moveTo(10,300);
tir.lineTo(10,0);
tir.stroke();
tir.fillText(100,111,300);
tir.fillText(300,311,300);
tir.fillText("distance (cm)",520,285);
tir.fillText("hauteur (cm)",20,10);
tir.fillText(100,20,190);
}
</script>
</body>
</html>
