diff options
author | Florian Merz <me@fiji-flo.de> | 2021-02-11 14:46:50 +0100 |
---|---|---|
committer | Florian Merz <me@fiji-flo.de> | 2021-02-11 14:46:50 +0100 |
commit | a55b575e8089ee6cab7c5c262a7e6db55d0e34d6 (patch) | |
tree | 5032e6779a402a863654c9d65965073f09ea4182 /files/es/web/html/element/canvas | |
parent | 8260a606c143e6b55a467edf017a56bdcd6cba7e (diff) | |
download | translated-content-a55b575e8089ee6cab7c5c262a7e6db55d0e34d6.tar.gz translated-content-a55b575e8089ee6cab7c5c262a7e6db55d0e34d6.tar.bz2 translated-content-a55b575e8089ee6cab7c5c262a7e6db55d0e34d6.zip |
unslug es: move
Diffstat (limited to 'files/es/web/html/element/canvas')
-rw-r--r-- | files/es/web/html/element/canvas/index.html | 88 |
1 files changed, 88 insertions, 0 deletions
diff --git a/files/es/web/html/element/canvas/index.html b/files/es/web/html/element/canvas/index.html new file mode 100644 index 0000000000..63e3e260a3 --- /dev/null +++ b/files/es/web/html/element/canvas/index.html @@ -0,0 +1,88 @@ +--- +title: canvas +slug: Web/HTML/Elemento/canvas +tags: + - Canvas + - HTML + - 'HTML:Elemento' + - para_revisar +translation_of: Web/HTML/Element/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" title="http://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-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" title="http://excanvas.sourceforge.net/">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" title="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> |