On considère les fichiers html et js suivants :
<!DOCTYPE html>
<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()">
<canvas id="tutoriel" width="400" height="400"></canvas>
</body></html>// 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 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){
// 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="black";
ctx.arc(mousePos.x, mousePos.y, 15, 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
};
}
}
Exercice 1
Ressource : https://developer.mozilla.org/fr/docs/Web/HTML/Element/Input/button
Modifier le HTML et le JS pour :
1. Agrandir l’espace de dessin,
2. Mettre un texte avant et après le canvas indiquant à l’utilisateur la marche à suivre,
3. Changer la couleur du crayon,
4. Modifier la taille du crayon.
Exercice 2
Ajouter un bouton permettant d’effacer l’espace de dessin et un autre permettant de choisir la couleur du crayon.
Proposition de correction :
<!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>Mon ardoise</h1>
<canvas id="tutoriel" width="800" height="400"></canvas>
<h2>Cliquer pour dessiner</h2>
<input type="color" aria-label="Sélectionner la couleur du crayon">
<input type="button" value="Effacer">
</body></html>
// 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éfinit la largeur et la hauteur du canvas
var width = canvas.width
var height = canvas.height
// on déclare notre feuille de dessin ctx qui sera une version 2D du canvas
var ctx = canvas.getContext("2d");
// on recupère nos boutons
var bouton_effacer = document.querySelector('input[type="button"]');
var bouton_couleur = document.querySelector('input[type="color"]');
// on utilise une variable boléenne pour indiquer si le crayon est levé ou non
var dessiner=false;
// 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);
bouton_effacer.onclick = function() {
ctx.fillStyle = 'rgb(255,255,255)';
ctx.fillRect(0,0,width,height);
}
// 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){
// 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=bouton_couleur.value;
ctx.arc(mousePos.x, mousePos.y, 5, 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
};
}
}