Hispanopedia Wiki
Articulo de referencia

Elemento Canvas

El elemento canvas de HTML permite la representación dinámica y programable de formas 2D e imágenes de mapa de bits . Introducido en HTML5 , es un modelo procedimental de bajo n...

Hispanopedia WikiContenido en espanolLectura gratuita

El elemento canvas de HTML permite la representación dinámica y programable de formas 2D e imágenes de mapa de bits . Introducido en HTML5 , es un modelo procedimental de bajo nivel que actualiza un mapa de bits . Este elemento también facilita la creación de juegos 2D .<canvas>

Si bien el elemento ofrece su propia API de dibujo 2D , también es compatible con la API WebGL para permitir la representación 3D con OpenGL ES .<canvas>

Historia

Canvas fue introducido inicialmente por Apple para su uso en su propio componente WebKit de Mac OS X en 2004, [ 1 ] impulsando aplicaciones como los widgets Dashboard y el navegador Safari . Posteriormente, en 2005, fue adoptado en la versión 1.8 de los navegadores Gecko , [ 2 ] y Opera en 2006, [ 3 ] y estandarizado por el Grupo de Trabajo de Tecnología de Aplicaciones de Hipertexto Web (WHATWG) en las nuevas especificaciones propuestas para las tecnologías web de próxima generación. [ 4 ]

Uso

Un lienzo (canvas) canvasconsiste en una región dibujable definida en código HTML con atributos de altura y anchura . El código JavaScript puede acceder a esta área mediante un conjunto completo de funciones de dibujo similares a las de otras API 2D comunes , lo que permite la generación dinámica de gráficos. Algunos usos previstos del lienzo incluyen la creación de gráficos, animaciones , juegos y composición de imágenes.

La interacción con el lienzo implica obtener el contexto de renderizado del lienzo, que determina si se debe usar la API del lienzo, WebGL o el contexto de renderizado WebGL2 .

Ejemplo

El siguiente código crea un elemento en una página HTML:<canvas>

< canvas id = "ejemplo" width = "200" height = "200" > Este texto se muestra si su navegador no es compatible con el elemento canvas de HTML. </canvas>​​

Usando JavaScript , puedes dibujar en el lienzo:

var example = document.getElementById ( ' example ' ); var context = example.getContext ( ' 2d ' ) ; context.fillStyle = ' red ' ; context.fillRect ( 30 , 30 , 50 , 50 ) ;

Este código dibuja un rectángulo rojo en la pantalla.

La API de Canvas también proporciona save()y restore(), para guardar y restaurar todos los atributos del contexto del lienzo.

Tamaño del elemento del lienzo en relación con el tamaño de la superficie de dibujo.

Un lienzo tiene dos tamaños: el del elemento en sí y el de su superficie de dibujo. Al establecer los atributos de ancho y alto del elemento, se definen ambos tamaños; los atributos CSS solo afectan al tamaño del elemento, no a la superficie de dibujo.

Por defecto, tanto el tamaño del elemento canvas como el de su superficie de dibujo son de 300 píxeles de ancho y 150 píxeles de alto. En el ejemplo, que utiliza CSS para definir el tamaño del elemento canvas, este tiene 600 píxeles de ancho y 300 píxeles de alto, pero la superficie de dibujo permanece sin cambios con su valor predeterminado de 300 píxeles × 150 píxeles. Cuando el tamaño de un elemento canvas no coincide con el de su superficie de dibujo, el navegador la ajusta para que se adapte al elemento (lo que puede generar efectos inesperados e indeseados).

Ejemplo de configuración del tamaño del elemento y del tamaño de la superficie de dibujo con valores diferentes:

<!DOCTYPE html> < html > < head > < title > Tamaño del elemento Canvas: 600 x 300, Tamaño de la superficie de dibujo del lienzo: 300 x 150 </ title > < style > body { background : #dddddd ; } # canvas { margin : 20 px ; padding : 20 px ; background : #ffffff ; border : thin inset #aaaaaa ; width : 600 px ; height : 300 px ; } </ style > </ head > < body > < canvas id = "canvas" > Lienzo no compatible </canvas> </body> </html>​​​​​​

Lienzo frente a gráficos vectoriales escalables (SVG)

SVG es un método alternativo para dibujar formas en navegadores. [ 5 ] A diferencia de canvas, que se basa en ráster , SVG se basa en vectores , de modo que cada forma dibujada se recuerda como un objeto en un grafo de escena o modelo de objetos de documento , que posteriormente se renderiza en un mapa de bits . Esto significa que si se modifican los atributos de un objeto SVG, el navegador puede volver a renderizar la escena automáticamente.

Los objetos Canvas, por otro lado, se dibujan en modo inmediato . En el ejemplo de Canvas anterior, la operación de dibujo de rectángulo modifica el Canvas, y el sistema olvida su representación como rectángulo. Si se cambiara la posición del rectángulo, sería necesario volver a dibujar el Canvas, incluyendo cualquier objeto que pudiera haber quedado cubierto por él. En el caso equivalente de SVG, bastaría con cambiar los atributos de posición del rectángulo y el navegador determinaría cómo volver a dibujarlo. Existen bibliotecas JavaScript adicionales que abstraen el modelo Canvas para ofrecer capacidades de escena similares a las de SVG dentro del elemento Canvas. También se pueden usar varias capas de Canvas, lo que significa que solo es necesario recrear capas específicas cuando se requieren cambios.

Las imágenes SVG se representan en XML , y se pueden crear y mantener escenas complejas con herramientas de edición XML.

The SVG scene graph enables event handlers to be associated with objects, so a rectangle may respond to an onClick event. To get the same functionality with canvas, one must manually match the coordinates of the mouse click with the coordinates of the drawn rectangle to determine whether it was clicked.

Conceptually, canvas is a lower-level API upon which higher-level interfaces might be built (for example, SVG support). There are JavaScript libraries that provide partial SVG implementations using canvas for browsers that do not provide SVG but support canvas, such as the browsers in Android 2.x. However, this is not normally the case—they are independent standards. The situation is complicated because there are scene graph libraries for canvas, and SVG has some bitmap manipulation functionality.

Reactions

At the time of its introduction, the canvas element was met with mixed reactions from the web standards community. There have been arguments against Apple's decision to create a new proprietary element instead of supporting the SVG standard. There are other concerns about syntax, such as the absence of a namespace.[6]

Intellectual property over canvas

On March 14, 2007, WebKit developer Dave Hyatt forwarded an email from Apple's Senior Patent Counsel, Helene Plotka Workman,[7] which stated that Apple reserved all intellectual property rights relative to WHATWG's Web Applications 1.0 Working Draft, dated March 24, 2005, Section 10.1, entitled "Graphics: The bitmap canvas",[8] but left the door open to licensing the patents should the specification be transferred to a standards body with a formal patent policy. This caused considerable discussion among web developers and raised questions concerning the WHATWG's lack of a policy on patents in comparison to the World Wide Web Consortium (W3C)'s explicit favoring of royalty-free licenses. Apple later disclosed the patents under the W3C's royalty-free patent licensing terms.[9] The disclosure means that Apple is required to provide royalty-free licensing for the patent whenever the Canvas element becomes part of a future W3C recommendation created by the HTML working group.[10]

Privacy concerns

La técnica de huella digital Canvas es una de las diversas técnicas de huella digital del navegador para rastrear a los usuarios en línea que permiten a los sitios web identificar y rastrear a los visitantes mediante el elemento HTML. La técnica recibió una amplia cobertura mediática en 2014, [ 11 ] [ 12 ] [ 13 ] [ 14 ] después de que investigadores de la Universidad de Princeton y la Universidad KU Leuven la describieran en su artículo The Web never forgets . [ 15 ] Las preocupaciones sobre la privacidad relacionadas con la huella digital Canvas se centran en el hecho de que incluso eliminar las cookies y borrar la caché no será suficiente para que los usuarios eviten el rastreo en línea.<canvas>

Compatibilidad con navegadores

El elemento es compatible con las versiones actuales de Mozilla Firefox , Google Chrome , Internet Explorer , Safari , Konqueror , Opera [ 16 ] y Microsoft Edge . [ 17 ]

Véase también

Referencias

  1. ↑ Ian Hixie (12 de julio de 2004). "Extendiendo HTML" . Consultado el 13 de junio de 2011 .
  2. ↑ Mozilla Developer Connection. "HTMLCanvasElement" . Archivado del original el 4 de junio de 2011. Consultado el 13 de junio de 2011 .
  3. ↑ "Registro de cambios de Opera 9.0" . Consultado el 20 de junio de 2006 .{{cite web}}: CS1 maint: servicio de archivado obsoleto ( enlace )
  4. ↑ "Estándar HTML" . html.spec.whatwg.org . Consultado el 9 de febrero de 2025 .
  5. ↑ "Gráficos vectoriales escalables | CorelDRAW" . www.coreldraw.com . Consultado el 23 de septiembre de 2022 .
  6. ↑ Comentarios de Ian Hickson sobre Canvas y otras extensiones de Apple para HTML
  7. ↑ "[whatwg] Borrador de aplicaciones web 1.0, David Hyatt, miércoles 14 de marzo de 2007, 14:31:53 PDT" . Archivado del original el 2 de mayo de 2007. Consultado el 1 de mayo de 2007 .
  8. ↑ Aplicaciones web 1.0 Borrador de trabajo inicial - Gráficos dinámicos: El lienzo de mapa de bits
  9. ↑ Estado de la política de patentes del Grupo de Trabajo HTML  : divulgaciones conocidas
  10. ↑ Política de patentes del W3C en uso por el grupo de trabajo de HTML
  11. ↑ Knibbs, Kate (21 de julio de 2014). "Lo que necesitas saber sobre la herramienta de seguimiento en línea más sigilosa" . Gizmodo . Consultado el 21 de julio de 2014 .
  12. ↑ Joseph Steinberg (23 de julio de 2014). "Te están rastreando en línea con una nueva tecnología sigilosa: esto es lo que necesitas saber" . Forbes . Consultado el 15 de noviembre de 2014 .
  13. ↑ Angwin, Julia (21 de julio de 2014). "Conozca el dispositivo de rastreo en línea que es prácticamente imposible de bloquear" . ProPublica . Consultado el 21 de julio de 2014 .
  14. ↑ Kirk, Jeremy (21 de julio de 2014). "Las herramientas de seguimiento web sigilosas plantean riesgos crecientes para la privacidad de los usuarios" . PC World . Consultado el 21 de julio de 2014 .
  15. ↑ Acar, Gunes; Eubank, Christian; Englehardt, Steven; Juarez, Marc; Narayanan, Arvind; Diaz, Claudia (24 de julio de 2014). "La web nunca olvida: mecanismos de seguimiento persistentes en la naturaleza" . Recuperado el 24 de julio de 2014 .
  16. ↑ Sucan, Mihai (4 de febrero de 2010). "¿SVG o Canvas? Elegir entre los dos" . Opera Software . Archivado del original el 23 de junio de 2010. Recuperado el 3 de mayo de 2010 .
  17. ↑ "Canvas, documentación de Microsoft Edge" .
  • El canvaselemento , W3C , 28-10-2014 , recuperado el 09-01-2015
  • Contexto 2D de HTML Canvas , W3C , 21/08/2014 , consultado el 09/01/2015.
  • Descripción de Canvas en las especificaciones preliminares de las aplicaciones web de WHATWG
  • Página de referencia de Canvas en Apple Developers Connection
  • Tutorial básico de Canvas en la comunidad de desarrolladores de Opera
  • Tutorial y página introductoria de Canvas en el Centro de desarrolladores de Mozilla. Archivado el 3 de agosto de 2012 en Wayback Machine.