files/fr/web/api/canvas_api/tutorial/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

---
title: Tutoriel canvas
slug: Web/API/Canvas_API/Tutoriel_canvas
tags:
  - Canvas
  - Guide
  - HTML
  - Tutoriel_canvas
  - Tutoriels
translation_of: Web/API/Canvas_API/Tutorial
---
<div>{{CanvasSidebar}}</div>

<p><img alt="" src="/@api/deki/files/1232/=Canvas_tut_examples.jpg" style="float: right;"></p>

<p class="summary"><strong><a href="https://developer.mozilla.org/fr/docs/Web/HTML/Element/canvas" title="fr/HTML/Canvas"><code>&lt;canvas&gt;</code></a></strong> est un nouvel élément <a href="https://developer.mozilla.org/fr/docs/Web/HTML" title="fr/HTML">HTML</a> qui peut être utilisé pour dessiner des éléments graphiques à l'aide de scripts (habituellement <a href="https://developer.mozilla.org/fr/docs/Glossaire/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="https://developer.mozilla.org/fr/docs/Un_raycaster_basique_avec_canvas" title="fr/Un_raycaster_basique">pas si simples</a>). Les images à droite montrent quelques exemples d'implémentations utilisant <code>&lt;canvas&gt;</code> que nous verrons plus tard dans ce tutoriel.</p>

<p><span id="result_box" lang="fr"><span>Ce tutoriel explique comment utiliser l'élément <code>&lt;canvas&gt;</code> pour dessiner des graphiques 2D, en commençant par les bases.</span> <span>Les exemples fournis devraient vous donner des idées claires sur ce que vous pouvez faire avec la toile et fournir des extraits de code qui peuvent vous aider à créer votre propre contenu.</span></span></p>

<p><span id="result_box" lang="fr"><span>D'abord introduit dans WebKit par Apple pour le tableau de bord OS X, <code>&lt;canvas&gt;</code> a depuis été implémenté dans les navigateurs.</span> <span>Aujourd'hui, tous les principaux navigateurs le prennent en charge.</span></span></p>

<h2 id="Avant_de_commencer" name="Avant_de_commencer">Avant de commencer</h2>

<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="https://developer.mozilla.org/fr/docs/Web/HTML" title="fr/HTML">HTML</a> et <a href="https://developer.mozilla.org/fr/docs/Glossaire/JavaScript" title="fr/JavaScript">JavaScript</a>. L'élément <code>&lt;canvas&gt;</code> n'est pas reconnu par tous les vieux navigateurs, mais il est supporté par les versions les plus récentes des principaux. <span id="result_box" lang="fr"><span>La taille par défaut de </span></span> canvas <span lang="fr"><span> est 300 px × 150 px (largeur × hauteur).</span> <span>Mais les tailles personnalisées peuvent être définies à l'aide des propriétés <a href="https://developer.mozilla.org/fr/docs/Web/HTML">HTML</a> <code>height</code> et <code>width</code>.</span> <span>Afin de dessiner des graphiques sur </span></span> canvas <span lang="fr"><span>, nous utilisons un objet de contexte JavaScript, qui crée des graphiques à la volée.</span></span></p>

<h2 id="Dans_ce_tutoriel" name="Dans_ce_tutoriel">Dans ce tutoriel</h2>

<ul>
 <li><a href="https://developer.mozilla.org/fr/docs/Tutoriel_canvas/Utilisation_de_base" title="fr/Tutoriel_canvas/Utilisation_de_base">Utilisation de base</a></li>
 <li><a href="https://developer.mozilla.org/fr/docs/Tutoriel_canvas/Formes_g%C3%A9om%C3%A9triques" title="fr/Tutoriel_canvas/Formes_géométriques">Dessin de formes géométriques</a></li>
 <li><a href="https://developer.mozilla.org/fr/docs/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="https://developer.mozilla.org/fr/docs/Dessin_de_texte_avec_canvas">Dessin de texte</a></li>
 <li><a href="https://developer.mozilla.org/fr/docs/Tutoriel_canvas/Utilisation_d'images" title="fr/Tutoriel_canvas/Utilisation_d'images">Utilisation d'images</a></li>
 <li><a href="https://developer.mozilla.org/fr/docs/Tutoriel_canvas/Transformations" title="fr/Tutoriel_canvas/Transformations">Transformations</a></li>
 <li><a href="https://developer.mozilla.org/fr/docs/Web/API/Canvas_API/Tutorial/Compositing" title="fr/Tutoriel_canvas/Compositions">Compositions et découpage</a></li>
 <li><a href="https://developer.mozilla.org/fr/docs/Tutoriel_canvas/Animations_basiques" title="fr/Tutoriel_canvas/Animations_basiques">Animations basiques</a></li>
 <li><a href="https://developer.mozilla.org/fr/docs/Tutoriel_canvas/Advanced_animations">Animations avancées</a></li>
 <li><a href="https://developer.mozilla.org/fr/docs/Tutoriel_canvas/Pixel_manipulation_with_canvas">Manipulation des pixels</a></li>
 <li><a href="https://developer.mozilla.org/fr/docs/Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility">Régions touchées et accessibilité</a></li>
 <li><a href="https://developer.mozilla.org/fr/docs/Tutoriel_canvas/Optimizing_canvas" title="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Optimizing_canvas">Optimisation</a></li>
 <li><a href="https://developer.mozilla.org/fr/docs/Web/API/Canvas_API/Tutorial/Finale">Final</a></li>
</ul>

<h2 id="Voir_aussi" name="Voir_aussi">Voir aussi</h2>

<ul>
 <li><a href="https://developer.mozilla.org/fr/docs/Web/HTML/Canvas" title="fr/HTML/Canvas">Page du sujet canvas</a></li>
 <li><a class="external external-icon" href="http://www.html5canvastutorials.com/" title="http://www.html5canvastutorials.com/">HTML5CanvasTutorials</a> (en)</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> (en)</li>
</ul>

<p>{{ Next("Tutoriel_canvas/Utilisation_de_base") }}</p>