El elemento lienzo es parte de HTML5 y permite la representación dinámica y mediante secuencias de comandos de formas 2D e imágenes de mapa de bits . Es un modelo de procedimiento de bajo nivel que actualiza un mapa de bits y no tiene un gráfico de escena incorporado , pero a través de WebGL permite que se muestren formas e imágenes en 3D. HTML5 Canvas también ayuda a crear juegos en 2D.
Historia
Canvas fue introducido inicialmente por Apple para su uso en su propio componente Mac OS X WebKit 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 Web Hypertext Application Technology Working Group (WHATWG) sobre nuevas especificaciones propuestas para tecnologías web de próxima generación. [ cita requerida ]
Uso
A canvas
consiste en una región dibujable definida en código HTML con atributos de alto y ancho . El código JavaScript puede acceder al área a través de un conjunto completo de funciones de dibujo similares a las de otras API 2D comunes, lo que permite gráficos generados dinámicamente. Algunos usos anticipados del lienzo incluyen la creación de gráficos, animaciones, juegos y composición de imágenes.
Ejemplo
El siguiente código crea un elemento Canvas en una página HTML:
< canvas id = "ejemplo" width = "200" height = "200" >Este texto se muestra si su navegador no es compatible con HTML5 Canvas.lienzo >
Con JavaScript, puede dibujar en el lienzo:
var ejemplo = documento . getElementById ( 'ejemplo' ); var context = ejemplo . getContext ( '2d' ); contexto . fillStyle = 'rojo' ; contexto . fillRect ( 30 , 30 , 50 , 50 );
Este código dibuja un rectángulo rojo en la pantalla.
Canvas API también proporciona save()
y restore()
, para guardar y restaurar todos los atributos del contexto del lienzo.
Tamaño del elemento de lienzo frente al tamaño de la superficie del dibujo
En realidad, un lienzo tiene dos tamaños: el tamaño del elemento en sí y el tamaño de la superficie de dibujo del elemento. La configuración de los atributos de ancho y alto del elemento establece ambos tamaños; Los atributos CSS afectan solo al tamaño del elemento y no a la superficie del dibujo.
De forma predeterminada, tanto el tamaño del elemento de lienzo como el tamaño de su superficie de dibujo es de 300 píxeles de pantalla de ancho y 150 píxeles de pantalla de alto. En la lista que se muestra en el ejemplo, que usa CSS para establecer el tamaño del elemento del lienzo, el tamaño del elemento es de 600 píxeles de ancho y 300 píxeles de alto, pero el tamaño de la superficie de dibujo permanece sin cambios en el valor predeterminado de 300 píxeles × 150. píxeles. Cuando el tamaño de un elemento de lienzo no coincide con el tamaño de su superficie de dibujo, el navegador escala la superficie de dibujo para que se ajuste al elemento (lo que puede resultar en efectos sorprendentes y no deseados).
Ejemplo de configuración del tamaño del elemento y del tamaño de la superficie de dibujo a diferentes valores:
< html > < head > < title > Tamaño del elemento de lienzo: 600 x 300, Tamaño de la superficie de dibujo del lienzo: 300 x 150 title > < style > body { background : #dddddd ; } # lienzo { margen : 20 px ; relleno : 20 px ; fondo : #ffffff ; borde : recuadro fino #aaaaaa ; ancho : 600 px ; altura : 300 px ; } style > head > < body > < canvas id = "canvas" > Canvas no compatible lienzo > cuerpo > html >
Lienzo frente a gráficos vectoriales escalables (SVG)
SVG es un estándar anterior para dibujar formas en navegadores. Sin embargo, a diferencia del lienzo, que se basa en ráster , SVG se basa en vectores , de modo que cada forma dibujada se recuerda como un objeto en un gráfico de escena o modelo de objeto de documento , que posteriormente se representa en un mapa de bits. Esto significa que si se cambian los atributos de un objeto SVG, el navegador puede volver a renderizar automáticamente la escena.
Los objetos de lienzo, por otro lado, se dibujan en modo inmediato . En el ejemplo de lienzo anterior, una vez que se dibuja el rectángulo, el sistema olvida el modelo del que se extrajo. Si se cambiara su posición, sería necesario volver a dibujar toda la escena, incluidos los objetos que podrían haber sido cubiertos por el rectángulo. Pero en el caso de SVG equivalente, uno podría simplemente cambiar los atributos de posición del rectángulo y el navegador determinaría cómo repintarlo. Hay bibliotecas de JavaScript adicionales que agregan capacidades de gráficos de escena al elemento canvas. También es posible pintar un lienzo en capas y luego recrear capas específicas.
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 que los controladores de eventos se asocien con objetos, por lo que un rectángulo puede responder a un onClick
evento. Para obtener la misma funcionalidad con el lienzo, uno debe hacer coincidir manualmente las coordenadas del clic del mouse con las coordenadas del rectángulo dibujado para determinar si se hizo clic en él.
Conceptualmente, el lienzo es una API de nivel inferior sobre la que se puede construir un motor que admita, por ejemplo, SVG. Hay bibliotecas de JavaScript que proporcionan implementaciones de SVG parciales utilizando lienzo para navegadores que no proporcionan SVG pero admiten lienzo, como los navegadores en Android 2.x. Sin embargo, normalmente este no es el caso, son estándares independientes. La situación es complicada porque hay bibliotecas de gráficos de escena para lienzo y SVG tiene algunas funciones de manipulación de mapas de bits.
Reacciones
En el momento de su introducción, el elemento lienzo se encontró con reacciones encontradas por parte de la comunidad de estándares web. Ha habido argumentos en contra de la decisión de Apple de crear un nuevo elemento propietario en lugar de admitir el estándar SVG . Hay otras preocupaciones sobre la sintaxis, como la ausencia de un espacio de nombres . [4]
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, [5] en el que se indicaba que Apple se reservaba todos los derechos de propiedad intelectual relacionados con el borrador de trabajo de las 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”, [6] pero dejó la puerta abierta a la concesión de licencias de patentes en caso de que la especificación se transfiriera a un organismo de normalización con una política formal de patentes . Esto provocó un debate considerable entre los desarrolladores web y planteó preguntas sobre la falta de una política de patentes por parte del WHATWG en comparación con el apoyo explícito del World Wide Web Consortium (W3C) a las licencias libres de regalías. Apple luego dio a conocer las patentes bajo los términos de licencia de patentes libres de regalías del W3C. [7] La divulgación significa que Apple debe proporcionar una licencia libre de regalías para la patente siempre que el elemento Canvas se convierta en parte de una futura recomendación del W3C creada por el grupo de trabajo HTML. [8]
Preocupaciones sobre la privacidad
La toma de huellas dactilares de lienzo es una de las técnicas de toma de huellas dactilares del navegador para rastrear a los usuarios en línea que permiten a los sitios web identificar y rastrear a los visitantes utilizando el elemento de lienzo HTML5 . La técnica recibió una amplia cobertura de los medios en 2014 [9] [10] [11] [12] después de que investigadores de la Universidad de Princeton y la Universidad de KU Leuven la describieran en su artículo The Web never olvida . [13] Las preocupaciones de privacidad con respecto a las huellas dactilares en el lienzo se centran en el hecho de que incluso eliminar las cookies y limpiar la memoria caché no será suficiente para que los usuarios eviten el seguimiento en línea.
Soporte del navegador
El elemento es compatible con las versiones actuales de Mozilla Firefox , Google Chrome , Internet Explorer , Safari , Konqueror , Opera [14] y Microsoft Edge . [15]
Ver también
- Geometría anti-grano (AGG)
- El Cairo (gráficos)
- Comparación de motores de diseño (HTML5 Canvas)
- Mostrar PostScript
- Interfaz de dispositivo gráfico (GDI +)
- Cuarzo 2D
- WebGL
Referencias
- ↑ Ian Hixie (12 de julio de 2004). "Ampliación de HTML" . Consultado el 13 de junio de 2011 .
- ^ Conexión de desarrollador de Mozilla. "HTMLCanvasElement" . Archivado desde el original el 4 de junio de 2011 . Consultado el 13 de junio de 2011 .
- ^ "Registro de cambios de Opera 9.0" . Archivado desde el original el 10 de septiembre de 2012 . Consultado el 20 de junio de 2006 .
- ^ Comentarios de Ian Hickson sobre lienzo y otras extensiones de Apple para HTML
- ^ "[whatwg] Borrador de aplicaciones web 1.0, David Hyatt, miércoles 14 de marzo de 2007 a las 14:31:53 PDT" . Archivado desde el original el 2 de mayo de 2007 . Consultado el 1 de mayo de 2007 .
- ^ Web Applications 1.0 Early Working Draft - Gráficos dinámicos: el lienzo del 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 HTML
- ^ Knibbs, Kate (21 de julio de 2014). "Lo que necesita saber sobre la nueva herramienta de seguimiento en línea más astuta" . Gizmodo . Consultado el 21 de julio de 2014 .
- ^ Joseph Steinberg (23 de julio de 2014). "Está siendo rastreado en línea por una nueva tecnología furtiva: esto es lo que necesita saber" . Forbes . Consultado el 15 de noviembre de 2014 .
- ^ Angwin, Julia (21 de julio de 2014). "Conozca el dispositivo de seguimiento 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 de privacidad cada vez mayores para los usuarios" . PC World . Consultado el 21 de julio de 2014 .
- ^ Acar, Gunes; Eubank, Christian; Englehardt, Steven; Juárez, Marc; Narayanan, Arvind; Díaz, Claudia (24 de julio de 2014). "La Web nunca olvida: mecanismos de seguimiento persistentes en la naturaleza" . Consultado el 24 de julio de 2014 .
- ^ Sucan, Mihai (4 de febrero de 2010). "¿SVG o Canvas? Elegir entre los dos" . Opera Software . Archivado desde el original el 23 de junio de 2010 . Consultado el 3 de mayo de 2010 .
- ^ "Canvas, documentación de Microsoft Edge" .
enlaces externos
- The canvaselement , W3C , 28 de octubre de 2014 , consultado el 9 de enero de 2015
- HTML Canvas 2D Context , W3C , 2014-08-21 , consultado el 2015-01-09
- Descripción del lienzo en las especificaciones preliminares de las aplicaciones web de WHATWG
- Página de referencia del lienzo en Apple Developers Connection
- Tutorial básico de Canvas en la comunidad de desarrolladores de Opera
- Tutorial de Canvas y página de introducción en el centro de desarrolladores de Mozilla