diff options
Diffstat (limited to 'files/fr/web/api/canvas_api/index.md')
| -rw-r--r-- | files/fr/web/api/canvas_api/index.md | 164 |
1 files changed, 164 insertions, 0 deletions
diff --git a/files/fr/web/api/canvas_api/index.md b/files/fr/web/api/canvas_api/index.md new file mode 100644 index 0000000000..9c3ea0f0ef --- /dev/null +++ b/files/fr/web/api/canvas_api/index.md @@ -0,0 +1,164 @@ +--- +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>Ajouté en <a href="/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">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">Firefox 1.5</a>). L'élément a été introduit à l'origine par Apple pour le <a 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="/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"><canvas id="canvas"></canvas> +</pre> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js">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> + +<h4 id="code_jouable">Code jouable</h4> + +<pre class="brush: html hidden"><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 hidden">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> + +<p>{{ EmbedLiveSample('code_jouable', 700, 360) }}</p> + +<h2 id="Références">Références</h2> + +<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> + +<p>Les interfaces liées au <code>WebGLRenderingContext</code> sont référencées sous <a href="/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">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 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> |