Exercice 1
Déterminer le code secret des 4 pages suivantes :
https://labodemaths.fr/ISN/code_secret/
Exercice 2
Examiner le code de la page html suivante :
https://labodemaths.fr/ISN/Ardoise_magique/
- Modifier le code js pour agrandir l’espace de dessin.
- Ajouter un titre et un mode d’emploi à la page.
- Modifier la couleur du crayon.
- Réduire la taille du crayon.
Pour la prochaine fois :
1. Ajouter un bouton permettant d’effacer l’ardoise.
2. Ajouter un bouton permettant à l’utilisateur de choisir la couleur du pinceau.
Ressources :
https://developer.mozilla.org/fr/docs/Web/HTML/Element/Input/button
Le html avec les boutons couleurs et taille et gomme :
<!DOCTYPE html>
<!-- saved from url=(0043)https://labodemaths.fr/ISN/Ardoise_magique/ -->
<html lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Dessiner et programmer avec canvas_V1</title>
<script src="./Dessiner et programmer avec canvas_V1_files/index.js"></script>
</head>
<body onload="draw()">
<h1>Ardoise magique</h1>
<p>Cliquer et bouger la souris pour dessiner</p>
<canvas id="tutoriel" width="800" height="400"></canvas>
<p>Choisir votre couleur:</p>
<input type="color" id="couleur" name="couleur" value="#e66465" />
<label for="couleur">couleur du stylo</label>
<input type="range" id="taille" name="taille" min="0" max="40" />
<label for="volume">Taille du crayon</label>
<input type="button" id="gomme" value="gomme" />
</body>
</html>
le .js
// on appelle la fonction draw lorsque la page est bien chargée dans le HTML
// par onload="draw()" comme propriété de l'élément
// body
function draw() {
// on déclare un élément canvas qui correspond à l'élément dont l'id est tutoriel
var canvas = document.getElementById("tutoriel");
// on déclare notre feuille de dessin ctx qui sera une version 2D du canvas
var ctx = canvas.getContext("2d");
// on utilise une variable boléenne pour indiquer si le crayon est levé ou non
var dessiner=false;
// on declare l'elt bouton couleur
elt_bouton=document.getElementById("couleur");
// on declare l'elt bouton taille
elt_taille=document.getElementById("taille");
// on declare l'elt bouton gomme
var gommer=false;
elt_gomme=document.getElementById("gomme");
// on attache un detecteur d 'evenement au bouton gomme
elt_gomme.addEventListener("mousedown",on_abaisse_la_gomme,false);
function on_abaisse_la_gomme(){
if (gommer==true){gommer=false;}else{gommer=true;}
}
// on installe 2 détecteurs d'événements sur l'élément canvas
// premier détecteur pour savoir si on abaisse
// la souris sur le canvas ( équivalent de clic)
canvas.addEventListener("mousedown", on_abaisse_le_stylo, false);
// second détecteur pour savoir si on bouge
// la souris sur le canvas
canvas.addEventListener("mousemove", dessiner_avec_la_souris, false);
// si l'evenement mousedown est détecté, on abaisse ou on releve le stylo
function on_abaisse_le_stylo(){
// si dessiner est à vrai, on le passe à faux
// sinon il est à faux et on le passe à vrai
if (dessiner==true){dessiner=false;}else{dessiner=true;}
}
// si la souris est en mouvement
function dessiner_avec_la_souris(evt){
// on dessine si le stylo est baissé
if ((dessiner==true) || (gommer==true)){
if (dessiner==true){var couleur=elt_bouton.value}
if (gommer==true){var couleur="white";}
// on recherche la position de la souris
// par rapport au canvas
var mousePos = getMousePos(canvas, evt);
// on dessine le cercle à la position de la souris
ctx.beginPath();
ctx.fillStyle=couleur;
ctx.arc(mousePos.x, mousePos.y, elt_taille.value, 0, 2*Math.PI);
ctx.fill();
ctx.closePath();
}
}
// fonction qui détermine la position de la souris par rapport à la page et
// par rapport à la position du canvas dans la page
// x et y sont alors les coordonnées de la souris par rapport à l'espace du canvas
// evt fait référence à l'événement position de la
// souris donc à la souris
function getMousePos(canvas, evt) {
// on récupère les coordonnées du canvas
// par rapport à la page
var rect = canvas.getBoundingClientRect();
// on calcule les coordonnées de la souris
// dans le canvas
// on retourne les valeurs trouvées
return {
x: evt.clientX - rect.left,
y: evt.clientY - rect.top
};
}
}