Please note, this is a STATIC archive of website developer.mozilla.org from 03 Nov 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

Revision 94547 of canvas

  • Enlace amigable (slug) de la revisión: HTML/Elemento/canvas
  • Título de la revisión: canvas
  • Id de la revisión: 94547
  • Creada:
  • Creador: inma_610
  • ¿Es la revisión actual? No
  • Comentario 2 words added, 2 words removed

Contenido de la revisión

{{ HTMLVersionHeader ("5") }}

{{ gecko_minversion_header ("1.8") }}

El elemento HTML canvas (<canvas>) se puede utilizar para dibujar gráficos a través de secuencias de comandos (por lo general JavaScript ). Por ejemplo, puede usarse para dibujar gráficos, hacer composiciones de fotos o incluso realizar animaciones.

Las aplicaciones de Mozilla adquirieron la compatibilidad con <canvas> a partir de Gecko 1.8 (es decir, Firefox 1.5 ). El elemento fue originalmente introducido por Apple en el OS X Dashboard y Safari. Internet Explorer, antes de la versión 9.0 beta, no admite de forma nativa <canvas> , pero una página puede de hecho añadir la compatibilidad mediante la inclusión de un script del proyecto Explorer Canvas de Google. Opera 9 también es compatible con <canvas> .

Para más artículos sobre canvas, consulta la página del tema canvas .

Contexto de uso

Contenido permitido Transparente, ya sea contenido estático o contenido dinámico .
Omisión de etiquetas Ninguna, deben estar presentes tanto las etiquetas de inicio como las de cierre
Elementos primarios permitidos Cualquier elemento que acepte contenido dinámico o cualquier otro elemento que acepte contenido estático . 
Documento normativo HTML 5, sección 4.8.10

Atributos

{{ htmlattrdef("width") }}
 La anchura del espacio de coordenadas en píxeles CSS. El valor predeterminado es 300.
{{ htmlattrdef("height") }}
La altura del espacio de coordenadas en píxeles CSS. El valor predeterminado es 150.

{{Nota ("el tamaño del lienzo mostrado se puede cambiar con una hoja de estilo. La imagen se escala durante la representación para adaptarse al tamaño que se le ha aplicado estilo .")}}

Interfaz DOM

Consulta también

{{ languages( {"en": "en/HTML/Element/canvas"} ) }}

Fuente de la revisión

<p><span class="goog-gtc-unit" id="goog-gtc-unit-2"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">{{ HTMLVersionHeader ("5") }}</span></span></p>
<p><span class="goog-gtc-unit" id="goog-gtc-unit-3"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">{{ gecko_minversion_header ("1.8") }}</span></span></p>
<p><span class="goog-gtc-unit" id="goog-gtc-unit-4"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">El elemento HTML <em>canvas</em> (&lt;canvas&gt;) se puede utilizar para dibujar gráficos a través de secuencias de comandos (por lo general <a href="/../../../../en/JavaScript" rel="internal" title="../../../../en/JavaScript">JavaScript</a> ).</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-5"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Por ejemplo, puede usarse para dibujar gráficos, hacer composiciones de fotos o incluso realizar animaciones.</span></span></p>
<p><span class="goog-gtc-unit" id="goog-gtc-unit-6"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Las aplicaciones de Mozilla adquirieron la compatibilidad con <code>&lt;canvas&gt;</code> a partir de Gecko 1.8 (es decir, <a href="/../../../../en/Firefox_1.5_for_developers" rel="internal" title="../../../../en/Firefox 1.5 for developers">Firefox 1.5</a> ).</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-7"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">El elemento fue originalmente introducido por Apple en el OS X <a class="external" href="https://www.apple.com/macosx/features/dashboard/" rel="external nofollow" title="https://www.apple.com/macosx/features/dashboard/">Dashboard</a> y Safari.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-8"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Internet Explorer, antes de la versión 9.0 beta, no admite de forma nativa <code>&lt;canvas&gt;</code> , pero una página puede de hecho añadir la compatibilidad mediante la inclusión de un script del proyecto <a class="external" href="https://excanvas.sourceforge.net/" rel="external nofollow" title="https://excanvas.sourceforge.net/">Explorer Canvas</a> de Google.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-9"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">Opera 9 también es compatible con <code>&lt;canvas&gt;</code> .</span></span></p>
<p><span class="goog-gtc-unit" id="goog-gtc-unit-10"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Para más artículos sobre canvas, consulta la <a href="/es/HTML/Canvas" title="es/HTML/Canvas">página del tema canvas</a> .</span></span></p>
<h2><span class="goog-gtc-unit" id="goog-gtc-unit-11"><span class="goog-gtc-translatable goog-gtc-from-tm goog-gtc-from-tm-score-100" dir="ltr" style="">Contexto de uso</span></span></h2>
<table class="standard-table"> <tbody> <tr> <td><span class="goog-gtc-unit" id="goog-gtc-unit-12"><span class="goog-gtc-translatable goog-gtc-from-tm goog-gtc-from-tm-score-100" dir="ltr" style="">Contenido permitido</span></span></td> <td><span class="goog-gtc-unit" id="goog-gtc-unit-13"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Transparente, ya sea <a href="/en/HTML/Content_categories#phrasing_content" title="en/HTML/Content categories#phrasing content">contenido estático</a> o <a href="/en/HTML/Content_categories#flow_content" title="en/HTML/Content categories#flow content">contenido dinámico</a> .</span></span></td> </tr> <tr> <td><span class="goog-gtc-unit" id="goog-gtc-unit-14"><span class="goog-gtc-translatable goog-gtc-from-tm goog-gtc-from-tm-score-100" dir="ltr" style="">Omisión de etiquetas</span></span></td> <td><span class="goog-gtc-unit" id="goog-gtc-unit-15"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Ninguna, deben estar presentes tanto las etiquetas de inicio como las de cierre</span></span></td> </tr> <tr> <td><span class="goog-gtc-unit" id="goog-gtc-unit-16"><span class="goog-gtc-translatable goog-gtc-from-tm goog-gtc-from-tm-score-100" dir="ltr" style="">Elementos primarios permitidos</span></span></td> <td><span class="goog-gtc-unit" id="goog-gtc-unit-17"><span class="goog-gtc-translatable goog-gtc-from-human goog-gtc-ph-missing" dir="ltr" style="">Cualquier elemento que acepte contenido dinámico o cualquier otro elemento que acepte contenido estático .</span></span> </td> </tr> <tr> <td><span class="goog-gtc-unit" id="goog-gtc-unit-18"><span class="goog-gtc-translatable goog-gtc-from-tm goog-gtc-from-tm-score-100" dir="ltr" style="">Documento normativo</span></span></td> <td><a class=" external" href="https://www.w3.org/TR/html5/the-canvas-element.html#the-canvas-element" title="https://www.w3.org/TR/html5/the-canvas-element.html#the-canvas-element"><span class="goog-gtc-unit" id="goog-gtc-unit-19"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">HTML 5, sección 4.8.10</span></span></a></td> </tr> </tbody>
</table>
<h2><span class="goog-gtc-unit" id="goog-gtc-unit-20"><span class="goog-gtc-translatable goog-gtc-from-tm goog-gtc-from-tm-score-100" dir="ltr" style="">Atributos</span></span></h2>
<dl> <dt><span class="goog-gtc-unit" id="goog-gtc-unit-21"><span class="goog-gtc-translatable goog-gtc-from-tm goog-gtc-from-tm-score-100" dir="ltr" style="">{{ htmlattrdef("width") }}</span></span></dt> <dd> <span class="goog-gtc-unit" id="goog-gtc-unit-22"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">La anchura del espacio de coordenadas en píxeles CSS.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-23"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">El valor predeterminado es 300.</span></span></dd> <dt><span class="goog-gtc-unit" id="goog-gtc-unit-24"><span class="goog-gtc-translatable goog-gtc-from-tm goog-gtc-from-tm-score-100" dir="ltr" style="">{{ htmlattrdef("height") }}</span></span></dt> <dd><span class="goog-gtc-unit" id="goog-gtc-unit-25"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">La altura del espacio de coordenadas en píxeles CSS.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-26"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">El valor predeterminado es 150.</span></span></dd>
</dl>
<p><span class="goog-gtc-unit" id="goog-gtc-unit-27"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">{{Nota ("el tamaño del lienzo mostrado se puede cambiar con una hoja de estilo.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-28"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">La imagen se escala durante la representación para adaptarse al tamaño que se le ha aplicado estilo .")}}</span></span></p>
<h2><span class="goog-gtc-unit" id="goog-gtc-unit-29"><span class="goog-gtc-translatable goog-gtc-from-tm goog-gtc-from-tm-score-99" dir="ltr" style="">Interfaz DOM</span></span></h2>
<ul> <li><a href="/en/DOM/HTMLCanvasElement" title="en/DOM/HTMLCanvasElement"><span class="goog-gtc-unit" id="goog-gtc-unit-30"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">HTMLCanvasElement</span></span></a></li>
</ul>
<h2><span class="goog-gtc-unit" id="goog-gtc-unit-31"><span class="goog-gtc-translatable goog-gtc-from-tm goog-gtc-from-tm-score-100" dir="ltr" style="">Consulta también</span></span></h2>
<ul> <li><a href="/es/HTML/Canvas" title="es/HTML/Canvas"><span class="goog-gtc-unit" id="goog-gtc-unit-32"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Tema sobre canvas</span></span></a></li>
</ul>
<p>{{ languages( {"en": "en/HTML/Element/canvas"} ) }}</p>
Revertir a esta revisión