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 94551 of canvas

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

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

Ejemplo

 

<canvas id="canvas" width="300" height="300">
  Sorry, your browser doesn't support the &lt;canvas&gt; element.
</canvas>

Consulta también

 

{{ languages( { "de": "de/HTML/Element/canvas", "en": "en/HTML/Element/canvas", "es": "es/HTML/Elemento/canvas", "ja": "ja/HTML/Element/canvas", "ko": "ko/HTML/Element/canvas", "nl": "nl/HTML/HTML_Tags/canvas", "pl": "pl/HTML/Element/canvas", "ru": "Ru/HTML/Element/canvas", "zh-cn": "cn/HTML/Element/canvas", "fr": "fr/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>
<div class="note"><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></div>
<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"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">Ejemplo</span></span></h2>
<p> </p>
<pre class="brush: html">&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;
  Sorry, your browser doesn't support the &amp;<span class="entity">lt;</span>canvas&amp;<span class="entity">gt;</span> element.
&lt;/<span class="end-tag">canvas</span>&gt;
</pre>
<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> </p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px; -qt-user-state:0;"><span style=" font-family:'Ubuntu'; font-size:9pt; color:#000000;">{{ languages( { "de": "de/HTML/Element/canvas", "en": "en/HTML/Element/canvas", "es": "es/HTML/Elemento/canvas", "ja": "ja/HTML/Element/canvas", "ko": "ko/HTML/Element/canvas", "nl": "nl/HTML/HTML_Tags/canvas", "pl": "pl/HTML/Element/canvas", "ru": "Ru/HTML/Element/canvas", "zh-cn": "cn/HTML/Element/canvas", "fr": "fr/HTML/Element/canvas" } ) }}</span></p>
Revertir a esta revisión