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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
|
---
title: API canvas
slug: Web/API/Canvas_API
tags:
- API
- Canvas
- Reference
translation_of: Web/API/Canvas_API
---
<div>{{IncludeSubnav("/fr/docs/Jeux")}} {{CanvasSidebar}}</div>
<p class="summary">Ajouté en <a href="https://developer.mozilla.org/fr/docs/Web/Guide/HTML/HTML5">HTML5</a>, l'élément {{HTMLElement("canvas")}} est un nouvel élément qui peut être utilisé pour dessiner des graphismes via des scripts <a href="/fr/docs/JavaScript" title="fr/docs/JavaScript">JavaScript</a>. Par exemple, Il peut être utilisé pour dessiner des graphes, faire des compositions de photos, des animations, ou même faire du traitement ou de l'affichage de vidéos en temps réel.</p>
<p>Les applications Mozilla ont commencé à supporter <canvas> à partir de Gecko 1.8 (c'est-à-dire <a href="/fr/docs/Firefox_1.5_pour_les_développeurs" title="fr/docs/Firefox_1.5_pour_les_développeurs">Firefox 1.5</a>). L'élément a été introduit à l'origine par Apple pour le <a class="external" href="http://www.apple.com/macosx/features/dashboard/">Dashboard d'OS X</a> et pour Safari. Internet Explorer supporte <canvas> depuis la version 9 et ultérieures, pour les versions précédentes d'IE, une page peut effectuer ce support de <canvas> en incluant un script depuis le projet <a href="http://excanvas.sourceforge.net/">Explorer Canvas </a>de Google.</p>
<p>L'élément <canvas> est aussi utilisé par <a href="https://developer.mozilla.org/fr/docs/Web/API/WebGL_API">WebGL</a> pour afficher des graphismes 3D avec accélération matérielle sur des pages web.</p>
<h2 id="Exemple">Exemple</h2>
<p>Voilà un simple extrait de code qui utilise la méthode {{domxref("CanvasRenderingContext2D.fillRect()")}}.</p>
<h3 id="HTML">HTML</h3>
<pre class="brush: html notranslate"><canvas id="canvas"></canvas>
</pre>
<h3 id="JavaScript">JavaScript</h3>
<pre class="brush: js notranslate">var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'green';
ctx.fillRect(10, 10, 100, 100);
</pre>
<p>Éditez le code ci-dessous pour voir les changements avoir lieu directement dans le canvas:</p>
<div class="hidden">
<h6 id="Playable_code">Playable code</h6>
<pre class="brush: html notranslate"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
<div class="playable-buttons">
<input id="edit" type="button" value="Edit" />
<input id="reset" type="button" value="Reset" />
</div>
<textarea id="code" class="playable-code">
ctx.fillStyle = 'green';
ctx.fillRect(10, 10, 100, 100);</textarea>
</pre>
<pre class="brush: js notranslate">var canvas = document.getElementById('canvas');
var ctx = canvas.getContext("2d");
var textarea = document.getElementById('code');
var reset = document.getElementById('reset');
var edit = document.getElementById('edit');
var code = textarea.value;
function drawCanvas() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
eval(textarea.value);
}
reset.addEventListener('click', function() {
textarea.value = code;
drawCanvas();
});
edit.addEventListener('click', function() {
textarea.focus();
})
textarea.addEventListener('input', drawCanvas);
window.addEventListener('load', drawCanvas);
</pre>
</div>
<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p>
<h2 id="Références">Références</h2>
<div class="index">
<ul>
<li>{{domxref("HTMLCanvasElement")}}</li>
<li>{{domxref("CanvasRenderingContext2D")}}</li>
<li>{{domxref("CanvasGradient")}}</li>
<li>{{domxref("CanvasImageSource")}}</li>
<li>{{domxref("CanvasPattern")}}</li>
<li>{{domxref("ImageBitmap")}}</li>
<li>{{domxref("ImageData")}}</li>
<li>{{domxref("RenderingContext")}}</li>
<li>{{domxref("TextMetrics")}}</li>
<li>{{domxref("OffscreenCanvas")}}{{experimental_inline}}</li>
<li>{{domxref("Path2D")}} {{experimental_inline}}{{domxref("ImageBitmapRenderingContext")}}{{experimental_inline}}</li>
</ul>
</div>
<p>Les interfaces liées au <code>WebGLRenderingContext</code> sont référencées sous <a href="/en-US/docs/Web/WebGL" title="/en-US/docs/Web/WebGL">WebGL</a>.</p>
<p>{{domxref("CanvasCaptureMediaStream")}} est lié.</p>
<h2 id="Guides_et_tutoriels">Guides et tutoriels</h2>
<dl>
<dt><a href="/fr/docs/Tutoriel_canvas">Tutoriel canvas</a></dt>
<dd>Un tutoriel complet qui couvre à la fois l'usage élémentaire de <code><canvas></code> mais aussi ses fonctionnalités avancées.</dd>
<dt><a href="/fr/docs/Extraits_de_code/Canvas" title="fr/docs/Extraits_de_code/Canvas">Extraits de code : Canvas</a></dt>
<dd>Quelques extraits de code orientés vers les développeurs d'extension qui utilisent <code><canvas></code>.</dd>
<dt><a href="/fr/docs/Un_raycaster_basique_avec_canvas">Demo: Un raycaster basique avec canvas</a></dt>
<dd>Une demonstration d'animation utilisant le ray-tracing dans un élément canvas.</dd>
<dt><a href="/fr/docs/Web/HTML/Canvas/Dessiner_des_objets_DOM_dans_un_element_canvas">Dessiner des objets DOM dans un élément canvas</a></dt>
<dd>Comment dessiner un contenu DOM, tel que des éléments HTML, dans un canvas.</dd>
<dt><a href="/fr/docs/HTML/Manipulating_video_using_canvas">Manipulation vidéo avec la balise canvas</a></dt>
<dd>Combiner {{HTMLElement("video")}} et {{HTMLElement("canvas")}} pour manipuler des données video en temps réel.</dd>
</dl>
<h2 id="Ressources">Ressources</h2>
<h3 id="Général">Général</h3>
<ul>
<li><a href="http://joshondesign.com/p/books/canvasdeepdive/title.html">HTML5 Canvas Deep Dive</a> (en)</li>
<li><a href="http://bucephalus.org/text/CanvasHandbook/CanvasHandbook.html">Canvas Handbook</a> (en)</li>
</ul>
<h3 id="Bibliothèques">Bibliothèques</h3>
<ul>
<li><a href="http://fabricjs.com">Fabric.js</a> est une bibliothèque open-source qui peut analyser du code SVG.</li>
<li><a href="https://github.com/ericdrowell/KineticJS">Kinetic.js</a> est une bibliothèque open-source concentrée sur l'interactivité pour les applications mobiles et de bureau.</li>
<li><a href="http://paperjs.org/">Paper.js</a> est une bibliothèque open-source qui rajoute un système de dessin vectoriel au canvas HTML5.</li>
<li><a href="http://origamijs.com/docs/">Origami.js</a> est une bibliothèque légère open-source pour canvas.</li>
<li><a href="http://libcanvas.github.com/">libCanvas</a> est un framework canvas puissant et léger.</li>
<li><a href="http://processingjs.org">Processing.js</a> est un portage du langage de visuaisation Processing.</li>
<li><a href="https://playcanvas.com/">PlayCanvas</a> est un moteur de jeu open-source.</li>
<li><a href="http://www.pixijs.com/">Pixi.js</a> est un moteur de jeu open-source.</li>
<li><a href="http://www.liquidx.net/plotkit/">PlotKit</a> est une bibliothèque permettant de réaliser des diagrammes et des graphiques.</li>
<li><a class="link-https" href="https://github.com/jeremyckahn/rekapi">Rekapi</a> est une API d'animation par key-framing pour Canvas.</li>
<li><a href="http://senchalabs.github.com/philogl/">PhiloGL</a> est un framework WebGL pour la visualisation de données, pour la programmation créative et pour le developpement de jeux.</li>
<li><a href="http://thejit.org/">JavaScript InfoVis Toolkit</a> crée des visualisation de données interactives en 2D avec canvas pour le Web.</li>
<li><a href="http://www.createjs.com/easeljs">EaselJS</a> est une bibliothèque gratuite/open-source qui facilite l'utilisation de canvas pour faire des jeux ou de l'art</li>
<li><a href="http://scrawl.rikweb.org.uk/">Scrawl-canvas</a> est une autre bibliothèque open-source pour créer et manipuler des éléments 2D dans canvas</li>
<li><a href="https://www.patrick-wied.at/static/heatmapjs/">heatmap.js</a> est une bibliothèque open-source pour créer des cartes thermiques basées sur canvas</li>
</ul>
<h2 id="Spécifications">Spécifications</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('HTML WHATWG', 'scripting.html#the-canvas-element', '<canvas>')}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td> </td>
</tr>
</tbody>
</table>
<h2 id="Voir_aussi">Voir aussi</h2>
<ul>
<li><a href="/en-US/docs/Web/WebGL">WebGL</a></li>
</ul>
|
