R\u00e9duire la taille du crayon.<\/li><\/ol>\n\n\n\nPour la prochaine fois :
1. Ajouter un bouton permettant d’effacer l’ardoise.
2. Ajouter un bouton permettant \u00e0 l’utilisateur de choisir la couleur du pinceau.<\/p>\n\n\n\n
Ressources :
https:\/\/developer.mozilla.org\/fr\/docs\/Web\/HTML\/Element\/Input\/button<\/p>\n\n\n\n
Proposition de correction<\/p>\n\n\n\n
<!DOCTYPE html>\n<!-- saved from url=(0043)https:\/\/labodemaths.fr\/ISN\/Ardoise_magique\/ -->\n<html lang=\"fr\"><head><meta http-equiv=\"Content-Type\" content=\"text\/html; charset=UTF-8\">\n \n <title>Dessiner et programmer avec canvas_V1<\/title>\n\n<\/head>\n<body onload=\"draw()\">\n<h1>Ardoise Magique<\/h1>\n<input id=\"couleur\" type=\"color\" aria-label=\"S\u00e9lectionner la couleur du crayon\" \/>\n<input type=\"range\" id=\"taille\" name=\"taille\" min=\"10\" max=\"60\" \/>\n <label for=\"volume\">Taille<\/label>\n<p>cliquer pour dessiner<\/p>\n <input type=\"color\" aria-label=\"S\u00e9lectionner la couleur du crayon\" \/>\n<canvas id=\"tutoriel\" width=\"800\" height=\"800\"><\/canvas>\n<\/body>\n<script src=\".\/Dessiner et programmer avec canvas_V1_files\/index.js\"><\/script>\n<\/html><\/code><\/pre>\n\n\n\n\n\n\n\/\/ on appelle la fonction draw lorsque la page est bien charg\u00e9e dans le HTML\n\/\/ par onload=\"draw()\" comme propri\u00e9t\u00e9 de l'\u00e9l\u00e9ment\n\/\/ body\nfunction draw() {\n \/\/ on d\u00e9clare un \u00e9l\u00e9ment canvas qui correspond \u00e0 l'\u00e9l\u00e9ment dont l'id est tutoriel\n var canvas = document.getElementById(\"tutoriel\");\n \/\/ on d\u00e9clare notre feuille de dessin ctx qui sera une version 2D du canvas\n var ctx = canvas.getContext(\"2d\");\n \/\/ on utilise une variable bol\u00e9enne pour indiquer si le crayon est lev\u00e9 ou non\n var dessiner=false;\n\/\/ on installe 2 d\u00e9tecteurs d'\u00e9v\u00e9nements sur l'\u00e9l\u00e9ment canvas\n \/\/ premier d\u00e9tecteur pour savoir si on abaisse\n\/\/ la souris sur le canvas ( \u00e9quivalent de clic)\n canvas.addEventListener(\"mousedown\", on_abaisse_le_stylo, false);\n \/\/ second d\u00e9tecteur pour savoir si on bouge\n \/\/ la souris sur le canvas\n canvas.addEventListener(\"mousemove\", dessiner_avec_la_souris, false);\n\n\n \/\/ si l'evenement mousedown est d\u00e9tect\u00e9, on abaisse ou on releve le stylo\n function on_abaisse_le_stylo(){\n \/\/ si dessiner est \u00e0 vrai, on le passe \u00e0 faux\n \/\/ sinon il est \u00e0 faux et on le passe \u00e0 vrai\n if (dessiner==true){dessiner=false;}else{dessiner=true;}\n\n }\n\n \/\/ si la souris est en mouvement\n function dessiner_avec_la_souris(evt){\n \/\/ on dessine si le stylo est baiss\u00e9\n if (dessiner==true){\n \/\/ on recherche la position de la souris\n \/\/ par rapport au canvas\n var mousePos = getMousePos(canvas, evt);\n \/\/ on dessine le cercle \u00e0 la position de la souris\n ctx.beginPath();\n ctx.fillStyle= document.getElementById(\"couleur\").value;\n\tvar taille=document.getElementById(\"taille\").value;\n ctx.arc(mousePos.x, mousePos.y, taille, 0, 2*Math.PI);\n ctx.fill();\n ctx.closePath();\n }\n}\n\n\/\/ fonction qui d\u00e9termine la position de la souris par rapport \u00e0 la page et\n\/\/ par rapport \u00e0 la position du canvas dans la page\n\/\/ x et y sont alors les coordonn\u00e9es de la souris par rapport \u00e0 l'espace du canvas\n\/\/ evt fait r\u00e9f\u00e9rence \u00e0 l'\u00e9v\u00e9nement position de la\n\/\/ souris donc \u00e0 la souris\nfunction getMousePos(canvas, evt) {\n \/\/ on r\u00e9cup\u00e8re les coordonn\u00e9es du canvas\n \/\/ par rapport \u00e0 la page\n var rect = canvas.getBoundingClientRect();\n \/\/ on calcule les coordonn\u00e9es de la souris\n \/\/ dans le canvas\n \/\/ on retourne les valeurs trouv\u00e9es\n return {\n x: evt.clientX - rect.left,\n y: evt.clientY - rect.top\n };\n }\n}\n<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"Exercice 1 D\u00e9terminer le code secret des 4 pages suivantes :https:\/\/labodemaths.fr\/ISN\/code_secret\/ Exercice 2 Examiner le…<\/p>\n
Read the postNSI,2025-2026,HTML et JS, TP 1<\/span><\/a><\/div>\n","protected":false},"author":2,"featured_media":1776,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[57],"tags":[],"_links":{"self":[{"href":"https:\/\/labodemaths.fr\/WordPress3\/wp-json\/wp\/v2\/posts\/1775"}],"collection":[{"href":"https:\/\/labodemaths.fr\/WordPress3\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/labodemaths.fr\/WordPress3\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/labodemaths.fr\/WordPress3\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/labodemaths.fr\/WordPress3\/wp-json\/wp\/v2\/comments?post=1775"}],"version-history":[{"count":10,"href":"https:\/\/labodemaths.fr\/WordPress3\/wp-json\/wp\/v2\/posts\/1775\/revisions"}],"predecessor-version":[{"id":2972,"href":"https:\/\/labodemaths.fr\/WordPress3\/wp-json\/wp\/v2\/posts\/1775\/revisions\/2972"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/labodemaths.fr\/WordPress3\/wp-json\/wp\/v2\/media\/1776"}],"wp:attachment":[{"href":"https:\/\/labodemaths.fr\/WordPress3\/wp-json\/wp\/v2\/media?parent=1775"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/labodemaths.fr\/WordPress3\/wp-json\/wp\/v2\/categories?post=1775"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/labodemaths.fr\/WordPress3\/wp-json\/wp\/v2\/tags?post=1775"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}