diff options
Diffstat (limited to 'files/fr/web/guide/graphics/dessiner_avec_canvas/index.html')
| -rw-r--r-- | files/fr/web/guide/graphics/dessiner_avec_canvas/index.html | 175 |
1 files changed, 175 insertions, 0 deletions
diff --git a/files/fr/web/guide/graphics/dessiner_avec_canvas/index.html b/files/fr/web/guide/graphics/dessiner_avec_canvas/index.html new file mode 100644 index 0000000000..5799de096f --- /dev/null +++ b/files/fr/web/guide/graphics/dessiner_avec_canvas/index.html @@ -0,0 +1,175 @@ +--- +title: Dessiner avec Canvas +slug: Web/Guide/Graphics/Dessiner_avec_canvas +tags: + - Canvas + - HTML +translation_of: Web/API/Canvas_API/Tutorial +--- +<p> </p> +<h3 id="Introduction" name="Introduction">Introduction</h3> +<p>Depuis <a href="/fr/Firefox_1.5_pour_les_d%C3%A9veloppeurs" title="fr/Firefox_1.5_pour_les_développeurs">Firefox 1.5</a>, Firefox comprend un nouvel élément HTML servant à dessiner programmatiquement. L'élément {{HTMLElement("canvas")}} est basé sur la <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#the-canvas">spécification canvas du WHATWG</a>, elle-même basée sur la balise <code><canvas></code> d'Apple implémentée dans Safari. Celui-ci peut être utilisé pour afficher des graphes, des élements d'interface, et d'autres éléments graphiques personnalisés sur le client.</p> +<p>{{HTMLElement("canvas")}} crée une surface de dessin de taille fixe, ou <em>canevas</em>, exposant un ou plusieurs <em>contextes de rendu</em>. Nous nous concentrerons sur le contexte de rendu 2D (c'est d'ailleurs le seul contexte de rendu actuellement défini). Dans le futur, d'autres contextes peuvent fournir différents types de rendu. Par exemple, il est probable qu'un contexte 3D basé sur OpenGL ES sera ajouté à la spécification <code><canvas></code>.</p> +<h3 id="Le_contexte_de_rendu_2D" name="Le_contexte_de_rendu_2D">Le contexte de rendu 2D</h3> +<h4 id="Un_exemple_simple" name="Un_exemple_simple">Un exemple simple</h4> +<p>Pour commencer, voici un exemple simple qui dessine deux rectangles ayant une intersection, l'un d'entre-eux possédant une transparence alpha :</p> +<p><img align="right" alt="Exemple 1." class="internal" src="/@api/deki/files/1337/=Canvas_ex1.png"></p> +<pre class="eval"><html> + <head> + <script type="application/x-javascript"> +function draw() { + var canvas = document.getElementById("canvas"); + var ctx = canvas.getContext("2d"); + + ctx.fillStyle = "rgb(200,0,0)"; + ctx.fillRect (10, 10, 55, 50); + + ctx.fillStyle = "rgba(0, 0, 200, 0.5)"; + ctx.fillRect (30, 30, 55, 50); +} + </script> + </head> + <body onload="draw()"> + <canvas id="canvas" width="300" height="300"></canvas> + </body> +</html> +</pre> +<p>La fonction <code>draw</code> récupère l'élément <code>canvas</code>, et ensuite son contexte <code>2d</code>. L'objet <code>ctx</code> peut ensuite être utilisé pour dessiner réellement vers le canevas. L'exemple remplit simplement les deux rectangles, en positionnant <code>fillStyle</code> à deux couleurs différentes à l'aide des spécifications de couleur CSS et d'un appel à <code>fillRect</code>. Le second appel à <code>fillStyle</code> utilise <code>rgba()</code> pour spécifier une valeur alpha parmi les informations de couleur.</p> +<p>Les appels à <code>fillRect</code>, <code>strokeRect</code> et <code>clearRect</code> affichent un rectangle plein, surligné ou vide. Pour afficher des formes plus complexes, on utilise des chemins.</p> +<h4 id="Utilisation_de_chemins" name="Utilisation_de_chemins">Utilisation de chemins</h4> +<p>La fonction <code>beginPath</code> commence un nouveau chemin, et <code>moveTo</code>, <code>lineTo</code>, <code>arcTo</code>, <code>arc</code> et des méthodes similaires sont utilisées pour ajouter des segments au chemin. Le chemin peut être fermé à l'aide de <code>closePath</code>. Une fois que le chemin est créé, vous pouvez utiliser <code>fill</code> ou <code>stroke</code> pour afficher celui-ci sur le canevas.</p> +<p><img align="right" alt="Exemple 2." class="internal" src="/@api/deki/files/1338/=Canvas_ex2.png"></p> +<pre class="eval"><html> + <head> + <script type="application/x-javascript"> +function draw() { + var canvas = document.getElementById("canvas"); + var ctx = canvas.getContext("2d"); + + ctx.fillStyle = "red"; + + ctx.beginPath(); + ctx.moveTo(30, 30); + ctx.lineTo(150, 150); + ctx.bezierCurveTo(60, 70, 60, 70, 70, 150); + ctx.lineTo(30, 30); + ctx.fill(); +} + </script> + </head> + <body onload="draw()"> + <canvas id="canvas" width="300" height="300"></canvas> + </body> +</html> +</pre> +<p>L'appel à <code>fill()</code> ou <code>stroke()</code> provoque l'utilisation du chemin. Pour être rempli ou dessiné à nouveau, le chemin devra être recréé.</p> +<h4 id=".C3.89tat_graphique" name=".C3.89tat_graphique">État graphique</h4> +<p>Les attributs du contexte comme <code>fillStyle</code>, <code>strokeStyle</code>, <code>lineWidth</code> et <code>lineJoin</code> font partie de l'<em>état graphique</em> courant. Le contexte fournit deux méthodes, <code>save()</code> et <code>restore()</code>, qui peuvent être utilisées pour déplacer l'état courant vers et depuis la pile d'états.</p> +<h4 id="Un_exemple_plus_compliqu.C3.A9" name="Un_exemple_plus_compliqu.C3.A9">Un exemple plus compliqué</h4> +<p>Voici un exemple un petit peu plus compliqué, qui utilise des chemins, des états et introduit également la matrice de transformation courante. Les méthodes du contexte <code>translate()</code>, <code>scale()</code> et <code>rotate()</code> transforment toutes la matrice courante. Tous les points affichés sont au préalable transformés par cette matrice.</p> +<p><img align="right" alt="Exemple 3." class="internal" src="/@api/deki/files/1339/=Canvas_ex3.png"></p> +<pre> <html> + <head> + <script type="application/x-javascript"> + function dessineNoeudPap(ctx, fillStyle) { + + ctx.fillStyle = "rgba(200,200,200,0.3)"; + ctx.fillRect(-30, -30, 60, 60); + + ctx.fillStyle = fillStyle; + ctx.globalAlpha = 1.0; + ctx.beginPath(); + ctx.moveTo(25, 25); + ctx.lineTo(-25, -25); + ctx.lineTo(25, -25); + ctx.lineTo(-25, 25); + ctx.closePath(); + ctx.fill(); + } + + function point(ctx) { + ctx.save(); + ctx.fillStyle = "black"; + ctx.fillRect(-2, -2, 4, 4); + ctx.restore(); + } + + function dessine() { + var canvas = document.getElementById("canvas"); + var ctx = canvas.getContext("2d"); + + // notez que toutes les autres translations sont relatives à + // celle-ci + ctx.translate(45, 45); + + ctx.save(); + //ctx.translate(0, 0); // non nécessaire + dessineNoeudPap(ctx, "red"); + point(ctx); + ctx.restore(); + + ctx.save(); + ctx.translate(85, 0); + ctx.rotate(45 * Math.PI / 180); + dessineNoeudPap(ctx, "green"); + point(ctx); + ctx.restore(); + + ctx.save(); + ctx.translate(0, 85); + ctx.rotate(135 * Math.PI / 180); + dessineNoeudPap(ctx, "blue"); + point(ctx); + ctx.restore(); + + ctx.save(); + ctx.translate(85, 85); + ctx.rotate(90 * Math.PI / 180); + dessineNoeudPap(ctx, "yellow"); + point(ctx); + ctx.restore(); + } + </script> + </head> + <body onload="dessine()"> + <canvas id="canvas" width="300" height="300"></canvas> + </body> + </html> +</pre> +<p>Ceci définit deux méthodes <code>dessineNoeudPap</code> et <code>point</code>, qui sont appelées 4 fois. Avant chaque appel, <code>translate()</code> et <code>rotate()</code> sont utilisées pour définir la matrice de transformation courante, qui à son tour positionne le point et le nœud papillon. <code>point</code> affiche un petit carré noir centré sur <code>(0, 0)</code>. Ce point est déplacé par la matrice de transformation. <code>dessineNoeudPap</code> affiche un chemin simple en forme de nœud papillon en utilisant le style de remplissage fourni en paramètre.</p> +<p>Comme les opérations de matrices sont cumulatives, <code>save()</code> et <code>restore()</code> sont utilisées autour de chaque jeu d'appels afin de restaurer l'état initial du canevas. Une chose à surveiller est que la rotation se passe toujours autour de l'origine courante ; donc une séquence <code>translate() rotate() translate()</code> donnera des résultats différents d'une série d'appels <code>translate() translate() rotate()</code>.</p> +<h3 id="Compatibilit.C3.A9_avec_le_.3Ccanvas.3E_d.27Apple" name="Compatibilit.C3.A9_avec_le_.3Ccanvas.3E_d.27Apple">Compatibilité avec le <canvas> d'Apple</h3> +<p>Pour la plus grande partie, le <code><canvas></code> de Mozilla est compatible avec celui d'Apple et d'autres implémentations. Il convient cependant d'être averti de quelques problèmes, décrits ci-dessous.</p> +<h4 id="Balise_.3C.2Fcanvas.3E_requise" name="Balise_.3C.2Fcanvas.3E_requise">Balise <code></canvas></code> requise</h4> +<p>Dans l'implémentation d'Apple Safari, <code><canvas></code> est un élément fortement semblable à l'élément <code><img></code> ; il ne doit pas forcément avoir de balise de fermeture. Cependant, pour que <code><canvas></code> puisse être utilisé à grande échelle sur le Web, il est important de pouvoir fournir facilement du contenu alternatif. C'est pourquoi l'implémentation de Mozilla a une balise de fin <em>requise</em>.</p> +<p>Si aucun contenu alternatif n'est nécessaire, un simple <code><canvas id="foo" ...></canvas></code> sera entièrement compatible avec Safari et Mozilla -- Safari ignorera simplement la balise de fermeture.</p> +<p>Si un contenu alternatif est désiré, certaines astuces CSS doivent être utilisées pour masquer le contenu alternatif à Safari (qui doit seulement afficher le canevas), et masquer ces mêmes astuces à Internet Explorer (qui doit afficher le contenu alternatif). <strong>À faire : les commandes CSS exactes doivent être fournies par hixie.</strong></p> +<h3 id="Fonctionnalit.C3.A9s_suppl.C3.A9mentaires" name="Fonctionnalit.C3.A9s_suppl.C3.A9mentaires">Fonctionnalités supplémentaires</h3> +<h4 id="Affichage_de_contenu_Web_dans_un_canevas" name="Affichage_de_contenu_Web_dans_un_canevas">Affichage de contenu Web dans un canevas</h4> +<div class="note"> + Cette fonctionnalité est uniquement disponible pour le code exécuté avec des privilèges Chrome. Son utilisation n'est pas permise dans des pages HTML normales.</div> +<p>L'élément <code>canvas</code> de Mozilla a été étendu avec la méthode <code>drawWindow</code>. Celle-ci dessine une capture du contenu d'un élément DOM <code>window</code> dans le canevas. Par exemple,</p> +<pre class="eval">ctx.drawWindow(window, 0, 0, 100, 200, "rgb(0,0,0)"); +</pre> +<p>affichera le contenu de la fenêtre courante dans le rectangle (0,0,100,200) défini en pixels relatifs au coin en haut à gauche de la fenêtre d'affichage, sur un fond noir, dans le canevas. En spécifiant "rgba(0,0,0,0)" comme couleur, le contenu sera dessiné avec un fond transparent (ce qui sera plus lent).</p> +<p>Avec cette méthode, il est possible de remplir un IFRAME caché avec du contenu arbitraire (par exemple, du texte HTML stylé avec CSS, ou du SVG) et de le dessiner dans un canevas. Celui-ci sera redimensionné, tourné, etc. suivant la transformation courante.</p> +<p>L'extension <a class="external" href="http://ted.mielczarek.org/code/mozilla/tabpreview/">tab preview</a> de Ted Mielczarek utilise cette technique dans le chrome pour fournir des miniatures de pages Web, et sa source est disponible pour référence.</p> +<h3 id="Voir_aussi" name="Voir_aussi">Voir aussi</h3> +<ul> + <li><a href="/fr/HTML/Canvas" title="fr/HTML/Canvas">Page du sujet canvas</a></li> + <li><a href="/fr/Tutoriel_canvas" title="fr/Tutoriel_canvas">Tutoriel canvas</a></li> + <li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#the-canvas">Spécification du WHATWG</a></li> + <li><a class="external" href="http://developer.apple.com/documentation/AppleApplications/Reference/SafariJSRef/Classes/Canvas.html">La documentation d'Apple sur Canvas</a></li> + <li><a class="external" href="http://weblogs.mozillazine.org/roc/archives/2005/05/rendering_web_p.html">Affichage de miniatures de pages Web</a></li> + <li>Quelques <a href="/Special:Tags?tag=Exemples_d'utilisation_de_canvas&language=fr" title="Special:Tags?tag=Exemples_d'utilisation_de_canvas&language=fr">exemples</a> : + <ul> + <li><a class="external" href="http://www.tapper-ware.net/canvas3d/">Rendu 3D du format OBJ</a></li> + <li><a href="/fr/Un_raycaster_basique" title="fr/Un_raycaster_basique">Un raycaster basique</a></li> + <li><a class="external" href="http://awordlike.com/">The Lightweight Visual Thesaurus</a></li> + <li><a class="external" href="http://www.abrahamjoffe.com.au/ben/canvascape/">Exemple impressionnant d'utilisation de canvas</a></li> + <li><a class="external" href="http://caimansys.com/painter/">Canvas Painter</a></li> + </ul> + </li> + <li><a href="/Special:Tags?tag=HTML:Canvas&language=fr" title="Special:Tags?tag=HTML:Canvas&language=fr">Et plus…</a></li> +</ul> +<p>{{ languages( { "en": "en/Drawing_Graphics_with_Canvas", "ja": "ja/Drawing_Graphics_with_Canvas", "ko": "ko/Drawing_Graphics_with_Canvas", "pl": "pl/Rysowanie_grafik_za_pomoc\u0105_Canvas" } ) }}</p> |