1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
|
---
title: canvas
slug: Web/HTML/Element/canvas
tags:
- Canvas
- HTML
- HTML:Elemento
- para_revisar
translation_of: Web/HTML/Element/canvas
original_slug: Web/HTML/Elemento/canvas
---
<p><span class="goog-gtc-unit" id="goog-gtc-unit-4"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">El elemento HTML <em>canvas</em> (<canvas>) 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-from-human goog-gtc-translatable" dir="ltr">Por ejemplo, puede usarse para dibujar gráficos, hacer composiciones de fotos o incluso realizar animaciones.</span></span></p>
<p>
</p><p><span class="goog-gtc-unit" id="goog-gtc-unit-6"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Las aplicaciones de Mozilla adquirieron la compatibilidad con <code><canvas></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-from-human goog-gtc-translatable" dir="ltr">El elemento fue originalmente introducido por Apple en el OS X <a class="external" href="http://www.apple.com/macosx/features/dashboard/" rel="external nofollow">Dashboard</a> y Safari.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-8"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Internet Explorer, antes de la versión 9.0 beta, no admite de forma nativa <code><canvas></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://excanvas.sourceforge.net/" rel="external nofollow">Explorer Canvas</a> de Google.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-9"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">Opera 9 también es compatible con <code><canvas></code> .</span></span></p>
<p></p>
<p><span class="goog-gtc-unit" id="goog-gtc-unit-10"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">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 id="Contexto_de_uso"><span class="goog-gtc-unit" id="goog-gtc-unit-11"><span class="goog-gtc-from-tm goog-gtc-from-tm-score-100 goog-gtc-translatable" dir="ltr">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-from-tm goog-gtc-from-tm-score-100 goog-gtc-translatable" dir="ltr">Contenido permitido</span></span></td>
<td><span class="goog-gtc-unit" id="goog-gtc-unit-13"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">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-from-tm goog-gtc-from-tm-score-100 goog-gtc-translatable" dir="ltr">Omisión de etiquetas</span></span></td>
<td><span class="goog-gtc-unit" id="goog-gtc-unit-15"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">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-from-tm goog-gtc-from-tm-score-100 goog-gtc-translatable" dir="ltr">Elementos primarios permitidos</span></span></td>
<td><span class="goog-gtc-unit" id="goog-gtc-unit-17"><span class="goog-gtc-from-human goog-gtc-ph-missing goog-gtc-translatable" dir="ltr">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-from-tm goog-gtc-from-tm-score-100 goog-gtc-translatable" dir="ltr">Documento normativo</span></span></td>
<td><a class="external" href="http://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-from-mt goog-gtc-translatable" dir="ltr">HTML 5, sección 4.8.10</span></span></a></td>
</tr>
</tbody>
</table>
<h2 id="Atributos"><span class="goog-gtc-unit" id="goog-gtc-unit-20"><span class="goog-gtc-from-tm goog-gtc-from-tm-score-100 goog-gtc-translatable" dir="ltr">Atributos</span></span></h2>
<dl>
<dt><span class="goog-gtc-unit" id="goog-gtc-unit-21"><span class="goog-gtc-from-tm goog-gtc-from-tm-score-100 goog-gtc-translatable" dir="ltr">{{ htmlattrdef("width") }}</span></span></dt>
<dd> <span class="goog-gtc-unit" id="goog-gtc-unit-22"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">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-from-mt goog-gtc-translatable" dir="ltr">El valor predeterminado es 300.</span></span></dd>
<dt><span class="goog-gtc-unit" id="goog-gtc-unit-24"><span class="goog-gtc-from-tm goog-gtc-from-tm-score-100 goog-gtc-translatable" dir="ltr">{{ htmlattrdef("height") }}</span></span></dt>
<dd><span class="goog-gtc-unit" id="goog-gtc-unit-25"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">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-from-mt goog-gtc-translatable" dir="ltr">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-from-human goog-gtc-translatable" dir="ltr">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-from-human goog-gtc-translatable" dir="ltr">La imagen se escala durante la representación para adaptarse al tamaño que se le ha aplicado estilo .</span></span></div>
<h2 id="Interfaz_DOM"><span class="goog-gtc-unit" id="goog-gtc-unit-29"><span class="goog-gtc-from-tm goog-gtc-from-tm-score-99 goog-gtc-translatable" dir="ltr">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-from-mt goog-gtc-translatable" dir="ltr">HTMLCanvasElement</span></span></a></li>
</ul>
<h2 id="Ejemplo"><span class="goog-gtc-unit"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">Ejemplo</span></span></h2>
<pre class="brush: html"><<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>>
Tu navegador no admite el elemento &<span class="entity">lt;</span>canvas&<span class="entity">gt;</span>.
</<span class="end-tag">canvas</span>>
</pre>
<h2 id="Sobre_Accesibilidad">Sobre Accesibilidad</h2>
<p>El elemento <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas" title="Use the HTML <canvas> element with either the canvas scripting API or the WebGL API to draw graphics and animations."><code><canvas></code></a> es simplemente un bitman que no provee ninguna información adicional sobre los elementos que tiene dibujados. El contenido de la etiqueta <code>canvas</code> no se muestra a los lectores de pantalla como otras etiquetas semánticas. Como regla general, deberías evitar utilizar canvas en un sitio accesible.</p>
<p>Para mejorar la accesibilidad de la etiquetas puedes leer los siguientes artículos (en inglés):</p>
<ul>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility">MDN Hit regions and accessability</a></li>
<li><a href="https://www.w3.org/WAI/PF/HTML/wiki/Canvas_Accessibility_Use_Cases">Canvas accessibility use cases</a></li>
<li><a href="https://www.w3.org/html/wg/wiki/AddedElementCanvas">Canvas element accessibility issues</a></li>
<li><a href="http://www.paciellogroup.com/blog/2012/06/html5-canvas-accessibility-in-firefox-13/">HTML5 Canvas Accessibility in Firefox 13 – by Steve Faulkner</a></li>
<li><a href="https://html.spec.whatwg.org/multipage/scripting.html#best-practices">Best practices for interactive canvas elements</a></li>
</ul>
<h2 id="Consulta_también"><span class="goog-gtc-unit" id="goog-gtc-unit-31"><span class="goog-gtc-from-tm goog-gtc-from-tm-score-100 goog-gtc-translatable" dir="ltr">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-from-human goog-gtc-translatable" dir="ltr">Tema sobre canvas</span></span></a></li>
</ul>
<p> </p>
<p style="margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; text-indent: 0px;"><span style="color: #000000; font-family: 'Ubuntu'; font-size: 9pt;">{{ 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>
|
