{"id":912,"date":"2019-11-06T21:21:05","date_gmt":"2019-11-06T20:21:05","guid":{"rendered":"http:\/\/labodemaths.fr\/WordPress3\/?p=912"},"modified":"2019-11-06T21:21:07","modified_gmt":"2019-11-06T20:21:07","slug":"tp-javascript-et-lelement-canvas","status":"publish","type":"post","link":"https:\/\/labodemaths.fr\/WordPress3\/tp-javascript-et-lelement-canvas\/","title":{"rendered":"TP : Javascript et l&rsquo;\u00e9l\u00e9ment canvas"},"content":{"rendered":"\n<h3>1. Pr\u00e9paration du TP1.<\/h3>\n\n\n\n<ul><li>Cr\u00e9er un dossier TP_js_canvas_1.,<\/li><li>ouvrir votre \u00e9diteur de code et copier-coller le code HTML ci-dessous :<\/li><\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html>\n&lt;html lang=\"fr\" >\n\n&lt;head>\n  &lt;meta charset=\"UTF-8\">\n  &lt;title>Dessiner et programmer avec canvas_V1&lt;\/title>\n&lt;script  src=\"index.js\">&lt;\/script>\n&lt;\/head>\n&lt;body onload=\"draw()\">\n&lt;canvas id=\"espace_de_dessin\" width=\"400\" height=\"400\">&lt;\/canvas>\n&lt;\/body>\n\n&lt;\/html><\/code><\/pre>\n\n\n\n<ul><li>enregistrer ce fichier dans votre r\u00e9pertoire avec le nom \u00ab\u00a0index.html\u00a0\u00bb,<\/li><li>dans un nouvel onglet de votre \u00e9diteur de code, copier-coller le code ci-dessous :<\/li><\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>\n\/\/ on appelle la fonction draw lorsque la page est bien charg\u00e9e\n\nfunction draw() {\n\/\/ on d\u00e9clare un \u00e9l\u00e9ment canvas qui correspond \u00e0 l'\u00e9l\u00e9ment dont l'id est tutoriel\nvar canvas = document.getElementById(\"espace_de_dessin\");\n\/\/ on d\u00e9clare notre feuille de dessin ctx qui sera une version 2D du canvas\n   var ctx = canvas.getContext(\"2d\");\n\n\/\/ on d\u00e9clare une couleur de remplissage\n ctx.fillStyle = \"rgb(200,0,0)\";\n\/\/ on ajoute un rectangle \u00e0 notre feuille de dessin ctx\n ctx.fillRect (10, 10, 55, 50);\n\/\/ on change la couleur de remplissage avec une opacit\u00e9 de 0.5\n ctx.fillStyle = \"rgba(0, 0, 200, 0.5)\";\n \/\/ on ajoute un nouveau rectangle;\n ctx.fillRect (30, 30, 55, 50);\n \/\/ On dessine un cercle\n ctx.beginPath();\n  ctx.fillStyle=\"green\";\n  ctx.arc(100, 100, 20, 0, 2 * Math.PI);\n  ctx.fill();\n\/\/ Un demi cercle\nctx.beginPath();\nctx.fillStyle=\"#FF4422\";\nctx.arc(60, 100, 20, 0, -Math.PI);\nctx.fill();\n \/\/ dessiner un triangle\n \/\/ trac\u00e9 du triangle\nctx.beginPath();\nctx.moveTo(100, 100);\nctx.lineTo(100, 300);\nctx.lineTo(300, 300);\nctx.closePath();\n\/\/ mise en forme de la bordure\nctx.lineWidth = 10;\nctx.strokeStyle = '#666666';\nctx.stroke();\n\/\/ remplissage\nctx.fillStyle = \"#FFCC00\";\nctx.fill();\n\/\/ un emoji\nctx.beginPath();\n  ctx.arc(250, 250, 100,0,Math.PI*2, true);\n  ctx.moveTo(235, 225);\n  ctx.arc(225, 225, 10, 0, Math.PI*2, true);\n  ctx.moveTo(285, 225);\n  ctx.arc(275, 225, 10, 0, Math.PI*2, true);\n  ctx.moveTo(250, 275);\n  ctx.arc(250, 275, 50, 0, Math.PI, false);\n  ctx.moveTo(250, 275);\n  ctx.lineTo(200, 275);\n  ctx.stroke();\n  ctx.closePath();\n }\n<\/code><\/pre>\n\n\n\n<ul><li>enregistrer ce nouveau fichier dans votre r\u00e9pertoire avec le nom \u00ab\u00a0index.js\u00a0\u00bb,<\/li><li>ouvrir avec un navigateur votre page html,<\/li><li>bravo, vous avez vos premiers dessins r\u00e9alis\u00e9s avec l&rsquo;\u00e9l\u00e9ment HTML canvas et un programme en javascript.<\/li><\/ul>\n\n\n\n<h4>Exercice 1<\/h4>\n\n\n\n<ul><li>ajouter un nouveau carr\u00e9 dans votre canvas diff\u00e9rent des pr\u00e9c\u00e9dents,<\/li><li>supprimer le triangle,<\/li><li>modifier votre emoji en le coloriant et en fermant ses yeux,<\/li><li>supprimer toutes les formes g\u00e9om\u00e9triques et placer votre emoji au centre de votre canvas.<\/li><\/ul>\n\n\n\n<h3>2. Pr\u00e9paration du TP2<\/h3>\n\n\n\n<ul><li>Cr\u00e9er un dossier TP_js_canvas_2.,<\/li><li>ouvrir votre \u00e9diteur de code et copier-coller le code HTML ci-dessous :<\/li><\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html>\n&lt;html lang=\"fr\" >\n\n&lt;head>\n  &lt;meta charset=\"UTF-8\">\n  &lt;title>Dessiner et programmer avec canvas_V2&lt;\/title>\n&lt;script  src=\"index.js\">&lt;\/script>\n&lt;\/head>\n&lt;body onload=\"draw()\">\n&lt;canvas id=\"espace_de_dessin\" width=\"400\" height=\"400\">&lt;\/canvas>\n&lt;\/body>\n\n&lt;\/html><\/code><\/pre>\n\n\n\n<ul><li>enregistrer ce fichier dans votre r\u00e9pertoire avec le nom \u00ab\u00a0index.html\u00a0\u00bb,<\/li><li>dans un nouvel onglet de votre \u00e9diteur de code, copier-coller le code ci-dessous :<\/li><\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ on appelle la fonction draw lorsque la page est bien charg\u00e9e\nfunction draw() {\n  \n   var canvas = document.getElementById(\"espace_de_dessin\");\n   var ctx = canvas.getContext(\"2d\");\n\n\/\/ on installe 1 d\u00e9tecteurs d'\u00e9v\u00e9nements sur l'\u00e9l\u00e9ment canvas\ncanvas.addEventListener(\"mousemove\",dessiner_avec_la_souris, false); \n\n\n\n \/\/ si souris est en mouvement\n function dessiner_avec_la_souris(evt){\n \/\/ on r\u00e9cup\u00e8re les coordonn\u00e9es de la souris dans le canvas\nvar mousePos = getMousePos(canvas, evt);\n\/\/ on dessine un cercle plein\nctx.beginPath();\nctx.fillStyle=\"black\";\nctx.arc(mousePos.x, mousePos.y, 15, 0, 2*Math.PI);\nctx.fill();\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\nfunction getMousePos(canvas, evt) {\n         var rect = canvas.getBoundingClientRect();\n         return {\n           x: evt.clientX - rect.left,\n           y: evt.clientY - rect.top\n         };\n       }\n}<\/code><\/pre>\n\n\n\n<ul><li>enregistrer ce nouveau fichier dans votre r\u00e9pertoire avec le nom \u00ab\u00a0index.js\u00a0\u00bb,<\/li><li>ouvrir avec un navigateur votre page html,<\/li><li>bravo, vous avez votre premi\u00e8re page html interactive : v\u00e9rifier le en promenant votre souris sur la page.<\/li><\/ul>\n\n\n\n<h4>Exercice 2<\/h4>\n\n\n\n<ul><li>agrandir votre espace de dessin,<\/li><li>changer la couleur, la taille et ne plus remplir le disque qui sert \u00e0 dessiner.<\/li><\/ul>\n\n\n\n<h3>3. Pr\u00e9paration du TP3<\/h3>\n\n\n\n<ul><li>Cr\u00e9er un dossier TP_js_canvas_3.,<\/li><li>ouvrir votre \u00e9diteur de code et copier-coller le code HTML ci-dessous :<\/li><\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html>\n&lt;html lang=\"fr\" >\n\n&lt;head>\n  &lt;meta charset=\"UTF-8\">\n  &lt;title>Dessiner et programmer avec canvas_V3&lt;\/title>\n&lt;script  src=\"index.js\">&lt;\/script>\n&lt;\/head>\n&lt;body onload=\"draw()\">\n&lt;canvas id=\"espace_de_dessin\" width=\"400\" height=\"400\">&lt;\/canvas>\n&lt;\/body>\n\n&lt;\/html><\/code><\/pre>\n\n\n\n<ul><li>enregistrer ce fichier dans votre r\u00e9pertoire avec le nom \u00ab\u00a0index.html\u00a0\u00bb,<\/li><li>dans un nouvel onglet de votre \u00e9diteur de code, copier-coller le code ci-dessous :<\/li><\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>\n\nfunction draw() {\n  var canvas = document.getElementById(\"espace_de_dessin\");\n   var ctx = canvas.getContext(\"2d\");\n\n\/\/ on utilise une variable bol\u00e9enne pour indiquer si le crayon est lev\u00e9 ou non\n\nvar dessiner=false;\n\n\/\/ une variable qui va g\u00e9rer le nombre de tour de rotation\n\nvar nbre_tour=0;\n\n\/\/ on installe 2 d\u00e9tecteurs d'\u00e9v\u00e9nements sur l'\u00e9l\u00e9ment canvas\n\n canvas.addEventListener(\"mousedown\", on_abaisse_le_stylo, false);\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\nfunction on_abaisse_le_stylo(){\n\/\/ si le stylo \u00e9tait abaiss\u00e9, on le rel\u00e8ve\n   if (dessiner==true){\n          dessiner=false;\n         }\n\/\/ sinon on l'abaisse\n    else{\n          dessiner=true;\n         }\n}\n\n \/\/ si souris est en mouvement\n\n function dessiner_avec_la_souris(evt){\n   \/\/ on dessine si le stylo est abaiss\u00e9\n   if (dessiner==true){\n   var mousePos = getMousePos(canvas, evt);\n   \n\n   nbre_tour=nbre_tour+1;\n    \/\/ on sauvegarde l'\u00e9tat du dessin\n   ctx.save();\n   \/\/on translate l'origine du canvas \u00e0 la position de la souris\nctx.translate(mousePos.x,mousePos.y);\n\/\/ rotation de la page\n   ctx.rotate((Math.PI \/ 180) * 25*nbre_tour);\n\/\/ on dessine un carr\u00e9\n   ctx.strokeStyle = '#0095DD';\n   ctx.strokeRect(-15, -15, 30, 30);\n   ctx.stroke();\n       \/\/ on restore le canvas \u00e0 l'\u00e9tat pr\u00e9c\u00e9dent la rotation\n   ctx.restore();\n   \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\nfunction getMousePos(canvas, evt) {\n         var rect = canvas.getBoundingClientRect();\n         return {\n           x: evt.clientX - rect.left,\n           y: evt.clientY - rect.top\n         };\n       }\n}\n<\/code><\/pre>\n\n\n\n<ul><li>enregistrer ce nouveau fichier dans votre r\u00e9pertoire avec le nom \u00ab\u00a0index.js\u00a0\u00bb,<\/li><li>ouvrir avec un navigateur votre page html,<\/li><li>bravo, vous avez votre seconde page html interactive : v\u00e9rifier le en promenant votre souris sur la page et en cliquant sur le canvas.<\/li><\/ul>\n\n\n\n<h4>Exercice 3<\/h4>\n\n\n\n<ul><li>agrandir votre espace de dessin,<\/li><li>modifier le programme javascript pour l&rsquo;adapter \u00e0 vos convenances : couleur, \u00e9paisseur, forme , vitesse de rotation &#8230;..<\/li><\/ul>\n","protected":false},"excerpt":{"rendered":"<p>1. Pr\u00e9paration du TP1. Cr\u00e9er un dossier TP_js_canvas_1., ouvrir votre \u00e9diteur de code et copier-coller&#8230;<\/p>\n<div class=\"more-link-wrapper\"><a class=\"more-link\" href=\"https:\/\/labodemaths.fr\/WordPress3\/tp-javascript-et-lelement-canvas\/\">Read the post<span class=\"screen-reader-text\">TP : Javascript et l&rsquo;\u00e9l\u00e9ment canvas<\/span><\/a><\/div>\n","protected":false},"author":2,"featured_media":913,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[58],"tags":[],"_links":{"self":[{"href":"https:\/\/labodemaths.fr\/WordPress3\/wp-json\/wp\/v2\/posts\/912"}],"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=912"}],"version-history":[{"count":1,"href":"https:\/\/labodemaths.fr\/WordPress3\/wp-json\/wp\/v2\/posts\/912\/revisions"}],"predecessor-version":[{"id":914,"href":"https:\/\/labodemaths.fr\/WordPress3\/wp-json\/wp\/v2\/posts\/912\/revisions\/914"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/labodemaths.fr\/WordPress3\/wp-json\/wp\/v2\/media\/913"}],"wp:attachment":[{"href":"https:\/\/labodemaths.fr\/WordPress3\/wp-json\/wp\/v2\/media?parent=912"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/labodemaths.fr\/WordPress3\/wp-json\/wp\/v2\/categories?post=912"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/labodemaths.fr\/WordPress3\/wp-json\/wp\/v2\/tags?post=912"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}