On consid\u00e8re les fichiers html et js suivants :<\/p>\n\n\n\n
<!DOCTYPE html>\n<html lang=\"fr\"><head><meta http-equiv=\"Content-Type\" content=\"text\/html; charset=UTF-8\">\n<title>Dessiner et programmer avec canvas_V1<\/title>\n<script src=\".\/Dessiner et programmer avec canvas_V1_files\/index.js\"><\/script>\n<\/head>\n<body onload=\"draw()\">\n<canvas id=\"tutoriel\" width=\"400\" height=\"400\"><\/canvas>\n<\/body><\/html><\/code><\/pre>\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=\"black\";\n ctx.arc(mousePos.x, mousePos.y, 15, 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\n\n\nExercice 1<\/h3>\n\n\n\n