<canvas>

This translation is incomplete. Please help translate this article from English.

L'element HTML <canvas> es pot utilitzar per dibuixar gràfics a través de seqüències d'ordres (normalment JavaScript). Per exemple, es pot utilitzar per dibuixar gràfics, fer composicions de fotos o fins i tot realitzar animacions. Pots (i has de) proporcionar contingut alternatiu dins del bloc <canvas>. Aquest contingut es representarà tant en navegadors antics que no suporten canvas com en navegadors amb  JavaScript desactivat.

Per a més articles sobre canvas, vegeu la pàgina del tema canvas.

Categories de contingut Contingut de Flux, phrasing content, Contingut incrustat, contingut palpable.
Contingut permès Transparent, però sense descendents de continguts interactius excepte per elements <a>,  elements <button>, elements <input> que el seu atribut type  sigui checkbox, radio, o button.
Omissió de l'etiqueta Cap, tant l'etiqueta inicial com l’etiqueta final són obligatòries
Elements pares permesos Qualsevol element que accepti phrasing_content.
Interfície DOM HTMLCanvasElement

Atributs

Aquest element inclou els atributs globals.

height
L'alçada de l'espai de coordenades en píxels de CSS. El valor per omissió és 150.
moz-opaque
Permet el llenç saber si la transparència serà un factor. Si el llenç sap que no hi ha transparència, el rendiment de la pintura pot ser optimitzat.
width
L'amplada de l'espai de coordenades en píxels de CSS. El valor per omissió és 300.

Descripció

Etiqueta </canvas> Requerida

A diferència de l'element <img>, l'element <canvas> requereix l'etiqueta de tancament (</ canvas>).

Dimensionament del llenç

La mida que es mostra del llenç es pot canviar fent servir un full d'estil. La imatge ha estat reduïda durant la representació per adaptar-se a la mida de l'estil. Si les seves representacions semblen distorsionades, intenta especificar els atributsdt width i height  de manera explícita en <canvas>, i no l'ús de CSS.

Exemples

Aquest fragment de codi afegeix un element el llenç del teu document HTML. Un text alternatiu es proporcionat si un navegador és incapaç de representar el lleç, o si no pot llegir un llenç. És útil proporcionar un text alternatiu o sub DOM ajuda a que el llenç sigui més accessible.

<canvas id="canvas" width="300" height="300">
  An alternative text describing what your canvas displays. 
</canvas> 

Si el llenç no utilitza la transparència estableix l'atribut moz-opaque a l'etiqueta canvas. Aquesta informació es pot utilitzar internament per optimitzar la representació. Tanmateix, aquest atribut no s'ha estandarditzat i només funciona en motors de renderitzat basats en Mozilla.

<canvas id="mycanvas" moz-opaque></canvas>

Especificacions

Especificació Estat Comentari
WHATWG HTML Living Standard
The definition of '<canvas>' in that specification.
Living Standard  
HTML5
The definition of '<canvas>' in that specification.
Recommendation definició inicial

Característica Chrome Firefox (Gecko) Internet Explorer Opera Safari
Suport bàsic 1.0 1.5 (1.8)[1]
6.0 (6.0)[2]
12.0 (12.0)[3]
9.0 9.0[4] 2.0[5]
moz-opaque No support 3.5 (1.9.1) No support No support No support
Característica Firefox Mobile (Gecko) Android IE Mobile Opera Mobile Safari Mobile
Suport bàsic 1.5 (1.8)[1]
6.0 (6.0)[2]
12.0 (12.0)[3]
? ? ? 1.0
moz-opaque 1.0 (1.9.1) No support No support No support No support

[1] Abans de Gecko 5.0 (Firefox 5.0 / Thunderbird 5.0 / SeaMonkey 2.2) , l'amplada i l'alçada del llenç eran enters amb signe en lloc d'enters sense signe

[2] Abans de Gecko 6.0 (Firefox 6.0 / Thunderbird 6.0 / SeaMonkey 2.3) , un element , amb una amplada o l'alçada zero es representava com si tingués dimensions predeterminades.

[3] Abans de Gecko 12.0 (Firefox 6.0 / Thunderbird 6.0 / SeaMonkey 2.3), si Javascript estava desactivat, l'element <canvas> es representava en lloc de mostrar el contingut de reserva segons l'especificació. Ara el contingut de reserva es representa en el seu lloc.

[4] Veura la llista de canvis en Opera 9.0.

[5] Tot i que les primeres versions del navegador Safari d'Apple no requerien l'etiqueta de tancament, l'especificació indica que s'exigeix, pel que ha de assegurar-se incloure-la per raons de compatibilitat més àmplia. Les versions de Safari (anteriors a la versió 2.0) podrán representar el contingut del recurs a més de la del pròpi llenç, a menys que utilitzi trucs CSS per emmascarar. Afortunadament, els usuaris d'aquestes versions de Safari són rars avui dia.

Veure

Document Tags and Contributors

 Contributors to this page: Legioinvicta
 Last updated by: Legioinvicta,