Ecriture du script de base
Attention, votre navigateur ne supporte pas le javascript ou celui-ci à été désactivé. Certaines fonctionnalitées dynamiques de ce module sont restreintes.
Le contexte est nommé tir.
L'image doit être rafraichie toutes les 30 ms. Pour cela, la fonction appelée sera nommée dessin.
La zone à effacer est le canevas complet (rappel, il a pour dimension hauteur=300 et largeur=600).
La cible à atteindre est un rectangle de bordure de couleur verte, dont le coin supérieur gauche a pour coordonnées (400,270) , la hauteur et la largeur sont 20.
Les axes sont dessinés et gradués.
L'origine du repère des axes dessinés est (10,290) dans le canevas.
Le script est complété par le dessin des axes et l'écriture des légendes.
<!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);
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>
