Expand your HTML skills through an MDN Fellowship - Apply by April 1 http://mzl.la/MDNFellowship

mozilla

Revision 77936 of <canvas>

  • Raccourci de la révision : HTML/Element/canvas
  • Titre de la révision : canvas
  • ID de la révision : 77936
  • Créé :
  • Créateur : xaky
  • Version actuelle ? Non
  • Commentaire page created, 201 words added

Contenu de la révision

{{ HTMLVersionHeader("5") }}

{{ gecko_minversion_header("1.8") }}

L'élément HTML Canvas (<canvas>)  permet de modifié une zone graphique via un script (habituellement JavaScript). Par exemple il peut etre utilisé pour dessiné des graphique, manipulé des images, jouer des animations. Il peut-être utilisé pour l'affichage d'un jeu en ligne ou tout autre contenu intéractif.

Firefox supporte  <canvas> depuis Gecko 1.8 (i.e., Firefox 1.5). L'élément a été introduit par Apple dans OSX et Safari. Internet Explorer, avant la version 9.0beta, ne supporte pas <canvas>, mais une page peut inclure son support via un script du projet "Google's Explorer Canvas" . Opera 9.0 supporte aussi <canvas>.

Pour plus d'info sur canvas, voir le Tutoriel canvas.

 Document officiel :  HTML 5, section 4.8.10

Attributs

Comme les autres éléments HTML, cet élément possède les  attributs globaux.

{{ htmlattrdef("width") }}
 La largeur en pixels CSS. 300 par défaut.
{{ htmlattrdef("height") }}
La hauteur en pixels CSS. 150 par défaut.

{{ Note("Les dimensions peuvent être modifiées via la feuille de style CSS.. L'image est mise à l'echelle en cas de redimensionement.") }}

Interface DOM

Exemples

<canvas id="canvas" width="300" height="300">
  Désolé, votre navigateur ne supporte pas &lt;canvas&gt;.
</canvas>

See also

Source de la révision

<p>{{ HTMLVersionHeader("5") }}</p>
<p>{{ gecko_minversion_header("1.8") }}</p>
<p>L'élément HTML <em>Canvas</em> (&lt;canvas&gt;)  permet de modifié une zone graphique via un script (habituellement <a href="/fr/JavaScript" rel="internal" title="fr/JavaScript">JavaScript</a>). Par exemple il peut etre utilisé pour dessiné des graphique, manipulé des images, jouer des animations. Il peut-être utilisé pour l'affichage d'un jeu en ligne ou tout autre contenu intéractif.</p>
<p>Firefox supporte  <code>&lt;canvas&gt;</code> depuis Gecko 1.8 (i.e., <a href="/fr/Firefox_1.5_for_developers" rel="internal" title="fr/Firefox 1.5 for developers">Firefox 1.5</a>). L'élément a été introduit par Apple dans OSX et Safari. Internet Explorer, avant la version 9.0beta, ne supporte pas <code>&lt;canvas&gt;</code>, mais une page peut inclure son support via un script du projet "Google's <a class="external" href="http://excanvas.sourceforge.net/" rel="external nofollow" target="_blank" title="http://excanvas.sourceforge.net/">Explorer Canvas</a>" . Opera 9.0 supporte aussi <code>&lt;canvas&gt;</code>.</p>
<p>Pour plus d'info sur canvas, voir le <a href="/fr/Tutoriel_canvas" title="fr/Tutoriel canvas">Tutoriel canvas</a>.</p>
<p> Document officiel :<a class=" external" href="http://www.w3.org/TR/html5/the-canvas-element.html#the-canvas-element" title="http://www.w3.org/TR/html5/the-canvas-element.html#the-canvas-element">  HTML 5, section 4.8.10</a></p>
<h2>Attributs</h2>
<p>Comme les autres éléments HTML, cet élément possède les  <a href="/fr/HTML/Global_attributes" title="fr/HTML/Global attributes">attributs globaux</a>.</p>
<dl> <dt>{{ htmlattrdef("width") }}</dt> <dd> La largeur en pixels CSS. 300 par défaut.</dd> <dt>{{ htmlattrdef("height") }}</dt> <dd>La hauteur en pixels CSS. 150 par défaut.</dd>
</dl>
<p>{{ Note("Les dimensions peuvent être modifiées via la feuille de style CSS.. L'image est mise à l'echelle en cas de redimensionement.") }}</p>
<h2>Interface DOM</h2>
<ul> <li><a href="/fr/DOM/HTMLCanvasElement" title="fr/DOM/HTMLCanvasElement">HTMLCanvasElement</a></li>
</ul>
<h2>Exemples</h2>
<pre>&lt;<span class="start-tag">canvas</span><span class="attribute-name"> id</span>=<span class="attribute-value">"canvas" </span><span class="attribute-name">width</span>=<span class="attribute-value">"300" </span><span class="attribute-name">height</span>=<span class="attribute-value">"300"</span>&gt;
  Désolé, votre navigateur ne supporte pas &amp;<span class="entity">lt;</span>canvas&amp;<span class="entity">gt;</span>.
&lt;/<span class="end-tag">canvas</span>&gt;
</pre>
<h2>See also</h2>
<ul> <li><a href="/fr/Tutoriel_canvas" title="fr/Tutoriel canvas">Tutoriel Canvas</a></li>
</ul>
Revenir à cette révision