canvas

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

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.

{{Note ("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

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="http://translate.google.com/en/JavaScript" rel="internal">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="http://translate.google.com/en/Firefox_1.5_for_developers" rel="internal">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="http://www.google.com/url?q=http%3A%2F%2Fwww.apple.com%2Fmacosx%2Ffeatures%2Fdashboard%2F&amp;sa=D&amp;sntz=1&amp;usg=AFQjCNFlkqUR0o-So5AxjsAw5r1qyraLuQ" rel="external nofollow">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="http://www.google.com/url?q=http%3A%2F%2Fexcanvas.sourceforge.net%2F&amp;sa=D&amp;sntz=1&amp;usg=AFQjCNGLtVloFmyyxtiTq_G5C9LjD_sJsg" rel="external nofollow">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>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>contenido estático</a> o <a>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="http://www.google.com/url?q=http%3A%2F%2Fwww.w3.org%2FTR%2Fhtml5%2Fthe-canvas-element.html%23the-canvas-element&amp;sa=D&amp;sntz=1&amp;usg=AFQjCNE-xwHiAeph-EbtkE6bJZFi3Pm3OQ"><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="">{{Note ("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><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><span class="goog-gtc-unit" id="goog-gtc-unit-32"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Temas sobre canvas</span></span></a></li>
</ul>
Revertir a esta revisión