Tutoriel canvas

  • Raccourci de la révision : Tutoriel_canvas
  • Titre de la révision : Tutoriel canvas
  • ID de la révision : 77935
  • Créé :
  • Créateur : lumiru
  • Version actuelle ? Non
  • Commentaire 1 words added, 1 words removed

Contenu de la révision

 

<canvas> est un nouvel élément HTML qui peut être utilisé pour dessiner des éléments graphiques à l'aide de scripts (habituellement JavaScript). Il permet par exemple de dessiner des graphiques, de réaliser des compositions de photographies ou des animations simples (voire pas si simples). L'image sur la droite montre quelques exemples d'implémentations utilisant <canvas> que nous verrons plus tard dans ce tutoriel.

La première apparition de <canvas> a eu lieu dans le Dashboard de Mac OS X par Apple, et celui-ci a ensuite été intégré dans Safari. Les navigateurs basés sur Gecko 1.8, comme Firefox 1.5, permettent également d'utiliser ce nouvel élément. L'élément <canvas> fait partie de la spécification WhatWG Web applications 1.0 aussi appelée HTML 5.

Dans ce tutoriel, nous tenterons de décrire la façon d'utiliser l'élément <canvas> dans vos propres pages HTML. Les exemples fournis devraient vous donner une idée assez claire de ce qu'il est possible de faire avec <canvas> et peuvent être utilisés pour commencer à construire vos propres réalisations.

Avant de commencer

L'utilisation de l'élément <canvas> n'a rien de très compliqué, mais nécessite tout de même une compréhension de base de HTML et JavaScript.

Comme précisé plus haut, l'élément <canvas> n'est pas reconnu par tous les navigateurs modernes, il est donc nécessaire de disposer de Firefox 1.5, un autre navigateur récent basé sur Gecko, Opera 9 ou une version récente de Safari pour profiter de tous les exemples en action.

Dans ce tutoriel

Voir aussi

{{ Suivant("fr/Tutoriel canvas:Utilisation de base") }}

{{ languages( { "en": "en/Canvas_tutorial", "ja": "ja/Canvas_tutorial", "ko": "ko/Canvas_tutorial", "pl": "pl/Przewodnik_po_canvas", "ru": "ru/\u041e\u0431\u0443\u0447\u0435\u043d\u0438\u0435_canvas", "zh-cn": "cn/Canvas_tutorial" } ) }}

Source de la révision

<p> </p>
<p><img align="right" alt="" class=" internal" src="/@api/deki/files/1232/=Canvas_tut_examples.jpg"></p>
<p><strong><a href="/fr/HTML/Canvas" title="fr/HTML/Canvas"><code>&lt;canvas&gt;</code></a></strong> est un nouvel élément <a href="/fr/HTML" title="fr/HTML">HTML</a> qui peut être utilisé pour dessiner des éléments graphiques à l'aide de scripts (habituellement <a href="/fr/JavaScript" title="fr/JavaScript">JavaScript</a>). Il permet par exemple de dessiner des graphiques, de réaliser des compositions de photographies ou des animations simples (voire <a href="/fr/Un_raycaster_basique" title="fr/Un_raycaster_basique">pas si simples</a>). L'image sur la droite montre quelques exemples d'implémentations utilisant <code>&lt;canvas&gt;</code> que nous verrons plus tard dans ce tutoriel.</p>
<p>La première apparition de <code>&lt;canvas&gt;</code> a eu lieu dans le <a class="external" href="http://www.apple.com/macosx/features/dashboard/">Dashboard de Mac OS X</a> par Apple, et celui-ci a ensuite été intégré dans Safari. Les navigateurs basés sur <a href="/fr/Gecko" title="fr/Gecko">Gecko</a> 1.8, comme Firefox 1.5, permettent également d'utiliser ce nouvel élément. L'élément <code>&lt;canvas&gt;</code> fait partie de la spécification <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/">WhatWG Web applications 1.0</a> aussi appelée HTML 5.</p>
<p>Dans ce tutoriel, nous tenterons de décrire la façon d'utiliser l'élément <code>&lt;canvas&gt;</code> dans vos propres pages HTML. Les exemples fournis devraient vous donner une idée assez claire de ce qu'il est possible de faire avec &lt;canvas&gt; et peuvent être utilisés pour commencer à construire vos propres réalisations.</p>
<h3 id="Avant_de_commencer" name="Avant_de_commencer">Avant de commencer</h3>
<p>L'utilisation de l'élément <code>&lt;canvas&gt;</code> n'a rien de très compliqué, mais nécessite tout de même une compréhension de base de <a href="/fr/HTML" title="fr/HTML">HTML</a> et <a href="/fr/JavaScript" title="fr/JavaScript">JavaScript</a>.</p>
<p>Comme précisé plus haut, l'élément <code>&lt;canvas&gt;</code> n'est pas reconnu par tous les navigateurs modernes, il est donc nécessaire de disposer de Firefox 1.5, un autre navigateur récent basé sur Gecko, Opera 9 ou une version récente de Safari pour profiter de tous les exemples en action.</p>
<h3 id="Dans_ce_tutoriel" name="Dans_ce_tutoriel">Dans ce tutoriel</h3>
<ul> <li><a href="/fr/Tutoriel_canvas/Utilisation_de_base" title="fr/Tutoriel_canvas/Utilisation_de_base">Utilisation de base</a></li> <li><a href="/fr/Tutoriel_canvas/Formes_géométriques" title="fr/Tutoriel_canvas/Formes_géométriques">Formes géométriques</a></li> <li><a href="/fr/Tutoriel_canvas/Utilisation_d'images" title="fr/Tutoriel_canvas/Utilisation_d'images">Utilisation d'images</a></li> <li><a href="/fr/Tutoriel_canvas/Ajout_de_styles_et_de_couleurs" title="fr/Tutoriel_canvas/Ajout_de_styles_et_de_couleurs">Ajout de styles et de couleurs</a></li> <li><a href="/fr/Tutoriel_canvas/Transformations" title="fr/Tutoriel_canvas/Transformations">Transformations</a></li> <li><a href="/fr/Tutoriel_canvas/Compositions" title="fr/Tutoriel_canvas/Compositions">Compositions</a></li> <li><a href="/fr/Tutoriel_canvas/Animations_basiques" title="fr/Tutoriel_canvas/Animations_basiques">Animations basiques</a></li>
</ul>
<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/Dessiner_avec_canvas" title="fr/Dessiner_avec_canvas">Dessiner avec canvas</a></li> <li><a href="/Special:Tags?tag=Exemples_d'utilisation_de_canvas&amp;language=fr" title="Special:Tags?tag=Exemples_d'utilisation_de_canvas&amp;language=fr">Exemples d'utilisation de canvas</a></li>
</ul>
<p>{{ Suivant("fr/Tutoriel canvas:Utilisation de base") }}</p>
<p>{{ languages( { "en": "en/Canvas_tutorial", "ja": "ja/Canvas_tutorial", "ko": "ko/Canvas_tutorial", "pl": "pl/Przewodnik_po_canvas", "ru": "ru/\u041e\u0431\u0443\u0447\u0435\u043d\u0438\u0435_canvas", "zh-cn": "cn/Canvas_tutorial" } ) }}</p>
Revenir à cette révision