mozilla

Comparaison de révisions

Dessiner avec Canvas

Change Revisions

Révision 135916 :

Révision 135916 par BenoitL le

Révision 135917 :

Révision 135917 par Nairod le

Titre :
Dessiner avec canvas
Dessiner avec canvas
Identifiant d'URL :
Dessiner_avec_canvas
Dessiner_avec_canvas
Étiquettes :
HTML, HTML:Canvas
HTML, HTML:Canvas
Contenu :

Revision 135916
Revision 135917
nn7    <p>
8      &nbsp;
9    </p>
7    <h3 name="Introduction">10    <h3 id="Introduction" name="Introduction">
n11      Depuis <a href="fr/Firefox_1.5_pour_les_d%c3%a9veloppeurs">n14      Depuis <a href="/fr/Firefox_1.5_pour_les_d%C3%A9veloppeurs"
>Firefox 1.5</a>, Firefox comprend un nouvel élément HTML servant > title="fr/Firefox_1.5_pour_les_développeurs">Firefox 1.5</a>, Fi
>à dessiner programmatiquement. L'élément <code>&lt;canvas&gt;</co>refox comprend un nouvel élément HTML servant à dessiner programm
>de> est basé sur la <a class="external" href="http://www.whatwg.o>atiquement. L'élément <code>&lt;canvas&gt;</code> est basé sur la
>rg/specs/web-apps/current-work/#the-canvas">spécification canvas > <a class="external" href="http://www.whatwg.org/specs/web-apps/c
>du WHATWG</a>, elle-même basée sur la balise <code>&lt;canvas&gt;>urrent-work/#the-canvas">spécification canvas du WHATWG</a>, elle
></code> d'Apple implémentée dans Safari. Celui-ci peut être utili>-même basée sur la balise <code>&lt;canvas&gt;</code> d'Apple imp
>sé pour afficher des graphes, des élements d'interface, et d'autr>lémentée dans Safari. Celui-ci peut être utilisé pour afficher de
>es éléments graphiques personnalisés sur le client.>s graphes, des élements d'interface, et d'autres éléments graphiq
 >ues personnalisés sur le client.
12    </p>
13    <p>15    </p>
16    <p>
14      <code>&lt;canvas&gt;</code> crée une surface de dessin de t17      <code>&lt;canvas&gt;</code> crée une surface de dessin de t
>aille fixe, ou <i>canevas</i>, exposant un ou plusieurs <i>contex>aille fixe, ou <em>canevas</em>, exposant un ou plusieurs <em>con
>tes de rendu</i>. Nous nous concentrerons sur le contexte de rend>textes de rendu</em>. Nous nous concentrerons sur le contexte de 
>u 2D (c'est d'ailleurs le seul contexte de rendu actuellement déf>rendu 2D (c'est d'ailleurs le seul contexte de rendu actuellement
>ini). Dans le futur, d'autres contextes peuvent fournir différent> défini). Dans le futur, d'autres contextes peuvent fournir diffé
>s types de rendu. Par exemple, il est probable qu'un contexte 3D >rents types de rendu. Par exemple, il est probable qu'un contexte
>basé sur OpenGL ES sera ajouté à la spécification <code>&lt;canva> 3D basé sur OpenGL ES sera ajouté à la spécification <code>&lt;c
>s&gt;</code>.>anvas&gt;</code>.
n16    <h3 name="Le_contexte_de_rendu_2D">n19    <h3 id="Le_contexte_de_rendu_2D" name="Le_contexte_de_rendu_2
 >D">
n19    <h4 name="Un_exemple_simple">n22    <h4 id="Un_exemple_simple" name="Un_exemple_simple">
n26      <img align="right" alt="Exemple 1." fileid="1337" src="Filen29      <img align="right" alt="Exemple 1." class="internal" src="/
>:fr/Media_Gallery/Canvas_ex1.png">>@api/deki/files/1337/=Canvas_ex1.png">
n55    <h4 name="Utilisation_de_chemins">n58    <h4 id="Utilisation_de_chemins" name="Utilisation_de_chemins"
 >>
n62      <img align="right" alt="Exemple 2." fileid="1338" src="Filen65      <img align="right" alt="Exemple 2." class="internal" src="/
>:fr/Media_Gallery/Canvas_ex2.png">>@api/deki/files/1338/=Canvas_ex2.png">
n77  // était : ctx.quadraticCurveTo(60, 70, 70, 150); ce qui est fan80  ctx.bezierCurveTo(60, 70, 60, 70, 70, 150);
>ux 
78  ctx.bezierCurveTo(60, 70, 60, 70, 70, 150); // &lt;- ceci est l
>a bonne formule pour l'image sur la droite -&gt; 
n92    <h4 name=".C3.89tat_graphique">n94    <h4 id=".C3.89tat_graphique" name=".C3.89tat_graphique">
n96      Les attributs du contexte comme <code>fillStyle</code>, <con98      Les attributs du contexte comme <code>fillStyle</code>, <co
>de>strokeStyle</code>, <code>lineWidth</code> et <code>lineJoin</>de>strokeStyle</code>, <code>lineWidth</code> et <code>lineJoin</
>code> font partie de l'<i>état graphique</i> courant. Le contexte>code> font partie de l'<em>état graphique</em> courant. Le contex
> fournit deux méthodes, <code>save()</code> et <code>restore()</c>te fournit deux méthodes, <code>save()</code> et <code>restore()<
>ode>, qui peuvent être utilisées pour déplacer l'état courant ver>/code>, qui peuvent être utilisées pour déplacer l'état courant v
>s et depuis la pile d'états.>ers et depuis la pile d'états.
n98    <h4 name="Un_exemple_plus_compliqu.C3.A9">n100    <h4 id="Un_exemple_plus_compliqu.C3.A9" name="Un_exemple_plus
 >_compliqu.C3.A9">
n105      <img align="right" alt="Exemple 3." fileid="1339" src="Filen107      <img align="right" alt="Exemple 3." class="internal" src="/
>:fr/Media_Gallery/Canvas_ex3.png">>@api/deki/files/1339/=Canvas_ex3.png">
n182    <h3 name="Compatibilit.C3.A9_avec_le_.3Ccanvas.3E_d.27Apple">n184    <h3 id="Compatibilit.C3.A9_avec_le_.3Ccanvas.3E_d.27Apple" na
 >me="Compatibilit.C3.A9_avec_le_.3Ccanvas.3E_d.27Apple">
n188    <h4 name="Balise_.3C.2Fcanvas.3E_requise">n190    <h4 id="Balise_.3C.2Fcanvas.3E_requise" name="Balise_.3C.2Fca
 >nvas.3E_requise">
n192      Dans l'implémentation d'Apple Safari, <code>&lt;canvas&gt;<n194      Dans l'implémentation d'Apple Safari, <code>&lt;canvas&gt;<
>/code> est un élément fortement semblable à l'élément <code>&lt;i>/code> est un élément fortement semblable à l'élément <code>&lt;i
>mg&gt;</code>&nbsp;; il ne doit pas forcément avoir de balise de >mg&gt;</code>&nbsp;; il ne doit pas forcément avoir de balise de 
>fermeture. Cependant, pour que <code>&lt;canvas&gt;</code> puisse>fermeture. Cependant, pour que <code>&lt;canvas&gt;</code> puisse
> être utilisé à grande échelle sur le Web, il est important de po> être utilisé à grande échelle sur le Web, il est important de po
>uvoir fournir facilement du contenu alternatif. C'est pourquoi l'>uvoir fournir facilement du contenu alternatif. C'est pourquoi l'
>implémentation de Mozilla a une balise de fin <i>requise</i>.>implémentation de Mozilla a une balise de fin <em>requise</em>.
n198      Si un contenu alternatif est désiré, certaines astuces CSS n200      Si un contenu alternatif est désiré, certaines astuces CSS 
>doivent être utilisées pour masquer le contenu alternatif à Safar>doivent être utilisées pour masquer le contenu alternatif à Safar
>i (qui doit seulement afficher le canevas), et masquer ces mêmes >i (qui doit seulement afficher le canevas), et masquer ces mêmes 
>astuces à Internet Explorer (qui doit afficher le contenu alterna>astuces à Internet Explorer (qui doit afficher le contenu alterna
>tif). <b>À faire&nbsp;: les commandes CSS exactes doivent être fo>tif). <strong>À faire&nbsp;: les commandes CSS exactes doivent êt
>urnies par hixie</b>>re fournies par hixie.</strong>
n200    <h3 name="Fonctionnalit.C3.A9s_suppl.C3.A9mentaires">n202    <h3 id="Fonctionnalit.C3.A9s_suppl.C3.A9mentaires" name="Fonc
 >tionnalit.C3.A9s_suppl.C3.A9mentaires">
n203    <h4 name="Affichage_de_contenu_Web_dans_un_canevas">n205    <h4 id="Affichage_de_contenu_Web_dans_un_canevas" name="Affic
 >hage_de_contenu_Web_dans_un_canevas">
n224    <h3 name="Voir_aussi">n226    <h3 id="Voir_aussi" name="Voir_aussi">
n229        <a href="fr/HTML/Canvas">Page du sujet canvas</a>n231        <a href="/fr/HTML/Canvas" title="fr/HTML/Canvas">Page du 
 >sujet canvas</a>
230      </li>
231      <li>232      </li>
233      <li>
232        <a href="fr/Tutoriel_canvas">Tutoriel canvas</a>234        <a href="/fr/Tutoriel_canvas" title="fr/Tutoriel_canvas">
 >Tutoriel canvas</a>
n243      <li>Quelques <a href="Special:Tags?tag=Exemples_d'utilisatin245      <li>Quelques <a href="/Special:Tags?tag=Exemples_d'utilisat
>on_de_canvas&amp;language=fr">exemples</a>&nbsp;:>ion_de_canvas&amp;language=fr" title="Special:Tags?tag=Exemples_d
 >'utilisation_de_canvas&amp;language=fr">exemples</a>&nbsp;:
n249            <a href="fr/Un_raycaster_basique">Un raycaster basiqun251            <a href="/fr/Un_raycaster_basique" title="fr/Un_rayca
>e</a>>ster_basique">Un raycaster basique</a>
t263        <a href="Special:Tags?tag=HTML:Canvas&amp;language=fr">Ett265        <a href="/Special:Tags?tag=HTML:Canvas&amp;language=fr" t
> plus…</a>>itle="Special:Tags?tag=HTML:Canvas&amp;language=fr">Et plus…</a>
266      </li>
264      </li>267    </ul>
268    <p>
265    </ul>{{ languages( { "en": "en/Drawing_Graphics_with_Canvas",269      {{ languages( { "en": "en/Drawing_Graphics_with_Canvas", "j
> "ja": "ja/Drawing_Graphics_with_Canvas", "ko": "ko/Drawing_Graph>a": "ja/Drawing_Graphics_with_Canvas", "ko": "ko/Drawing_Graphics
>ics_with_Canvas", "pl": "pl/Rysowanie_grafik_za_pomoc\u0105_Canva>_with_Canvas", "pl": "pl/Rysowanie_grafik_za_pomoc\u0105_Canvas" 
>s" } ) }}>} ) }}
270    </p>

Retour à l'historique