contenu
menu
navigation
outils
pied de page

Incorporer des graphes interactifs dans une page web

Mode :

Accueil
Cours
Outils
Imprimer

Menu :

défilement haut

Objectifs
Introduction
Mise en place du canevas >
Dessiner une courbe >
L'interactivité >
Exercice v
- Structure du programme
- Exercice : Définition du canevas
- Exercice : Définition de l'entrée vitesse initiale avec la balise input
- Exercice : Ecriture du script de base
- Exercice : Compléments au script : dessin de la rampe de tir
- Exercice : Compléments au script : dessin du projectile
- Programme final
Aller plus loin

défilement bas

Masquer le plan

Afficher le plan

Contenu :

Précédent SuivantCompléments au script : dessin de la rampe de tir

Correction

Recommencer

Mauvaise réponse

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.

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

Solution :

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.

Corrigé avec rampe de lancement

<!DOCTYPE HTML>

<head>

<title>modéliser tir</title>

</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/>

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>

Navigation : |

| | |

Incorporer des graphes interactifs dans une page web

PrécédentSuivantCompléments au script : dessin de la rampe de tir

Précédent SuivantCompléments au script : dessin de la rampe de tir