Hispanopedia WikiEl 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" > Canvas no es 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.
El gráfico de escena SVG permite asociar controladores de eventosonClick a objetos, de modo que un rectángulo puede responder a un evento. Para obtener la misma funcionalidad con canvas, es necesario comparar manualmente las coordenadas del clic del ratón con las del rectángulo dibujado para determinar si se ha pulsado.
Conceptualmente, canvas es una API de bajo nivel sobre la cual se pueden construir interfaces de alto nivel (por ejemplo, compatibilidad con SVG). Existen bibliotecas de JavaScript que proporcionan implementaciones parciales de SVG utilizando canvas para navegadores que no ofrecen SVG pero sí compatibilidad con canvas, como los navegadores en Android 2.x. Sin embargo, esto no suele ser lo habitual, ya que se trata de estándares independientes. La situación se complica porque existen bibliotecas de grafos de escena para canvas, y SVG cuenta con cierta funcionalidad de manipulación de mapas de bits.
Reacciones
En el momento de su introducción, el elemento canvas recibió reacciones encontradas por parte de la comunidad de estándares web. Se han planteado argumentos en contra de la decisión de Apple de crear un nuevo elemento propietario en lugar de dar soporte al estándar SVG . Existen otras preocupaciones sobre la sintaxis, como la ausencia de un espacio de nombres . [ 6 ]
Propiedad intelectual sobre lienzo
El 14 de marzo de 2007, el desarrollador de WebKit, Dave Hyatt, reenvió un correo electrónico de la asesora principal de patentes de Apple, Helene Plotka Workman, [ 7 ] que indicaba que Apple se reservaba todos los derechos de propiedad intelectual relativos al borrador de trabajo de aplicaciones web 1.0 de WHATWG, con fecha del 24 de marzo de 2005, Sección 10.1, titulada "Gráficos: El lienzo de mapa de bits", [ 8 ] pero dejaba abierta la posibilidad de licenciar las patentes si la especificación se transfería a un organismo de normalización con una política de patentes formal . Esto provocó un debate considerable entre los desarrolladores web y planteó interrogantes sobre la falta de una política de patentes por parte de WHATWG en comparación con la preferencia explícita del Consorcio World Wide Web (W3C) por las licencias libres de regalías. Posteriormente, Apple divulgó las patentes bajo los términos de licencia de patentes libres de regalías del W3C. [ 9 ] La divulgación implica que Apple está obligada a proporcionar una licencia libre de regalías para la patente siempre que el elemento Canvas pase a formar parte de una futura recomendación del W3C creada por el grupo de trabajo de HTML. [ 10 ]
preocupaciones sobre la privacidad
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
- ↑ Ian Hixie (12 de julio de 2004). "Extendiendo HTML" . Consultado el 13 de junio de 2011 .
- ↑ Mozilla Developer Connection. "HTMLCanvasElement" . Archivado del original el 4 de junio de 2011. Consultado el 13 de junio de 2011 .
- ↑ "Registro de cambios de Opera 9.0" . Consultado el 20 de junio de 2006 .
{{cite web}}: CS1 maint: servicio de archivado obsoleto ( enlace ) - ↑ "Estándar HTML" . html.spec.whatwg.org . Consultado el 9 de febrero de 2025 .
- ↑ "Gráficos vectoriales escalables | CorelDRAW" . www.coreldraw.com . Consultado el 23 de septiembre de 2022 .
- ↑ Comentarios de Ian Hickson sobre Canvas y otras extensiones de Apple para HTML
- ↑ "[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 .
- ↑ Aplicaciones web 1.0 Borrador de trabajo inicial - Gráficos dinámicos: El lienzo de mapa de bits
- ↑ Estado de la política de patentes del Grupo de Trabajo HTML : divulgaciones conocidas
- ↑ Política de patentes del W3C en uso por el grupo de trabajo de HTML
- ↑ 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 .
- ↑ 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 .
- ↑ 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 .
- ↑ 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 .
- ↑ 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 .
- ↑ 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 .
- ↑ "Canvas, documentación de Microsoft Edge" .
Enlaces externos
- 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.
- etiquetas HTML
- HTML5
