Lienzo (HTML)

La versión actual de la página aún no ha sido revisada por colaboradores experimentados y puede diferir significativamente de la versión revisada el 29 de abril de 2016; las comprobaciones requieren 24 ediciones .

Canvas ( ing.  canvas  - " canvas ", rus. kanvas ) es un elemento HTML5 diseñado para crear una imagen de mapa de bits bidimensional usando scripts, generalmente en JavaScript [1] . El origen del bloque está en la parte superior izquierda. Cada elemento del bloque [2] se construye a partir de él . El tamaño del espacio de coordenadas no refleja necesariamente el tamaño del área real mostrada [2] . Por defecto, su ancho es de 300 píxeles y su altura es de 150 [2] .

Se utiliza, por regla general, para dibujar gráficos para artículos y el campo de juego en algunos juegos de navegador. Pero también se puede usar para incrustar un video en una página y crear un reproductor completo.

Usado en WebGL para la aceleración de hardware de gráficos 3D [3] .

Biblioteca de JavaScript explorercanvas publicada por Google. Archivado el 11 de febrero de 2013. , que permitió trabajar con Canvas en los navegadores IE7 e IE8.

Canvas puede dificultar que los robots reconozcan Captchas . Cuando se usa el lienzo, no se carga una imagen del servidor, sino un conjunto de puntos (o un algoritmo de dibujo), según el cual el navegador dibuja una imagen (captcha) [4] .

Historia

El elemento canvasfue introducido por primera vez por Apple en el motor WebKit para Mac OS X con miras a su posterior uso en las aplicaciones Dashboard y Safari [1] .

Google solucionó la falta de lienzo en IE al lanzar su propia extensión escrita en JavaScript llamada ExplorerCanvas [5] .

Hasta la fecha, el lienzo se usa más comúnmente para gráficos, animaciones simples y juegos en navegadores [6] . El WHATWG propone utilizar el lienzo como estándar para la creación de gráficos en las nuevas generaciones de aplicaciones web [7] .

La Fundación Mozilla tiene un proyecto llamado Canvas 3D [8] que tiene como objetivo agregar soporte de bajo nivel para aceleradores de gráficos para mostrar imágenes en 3D a través del elemento canvas de HTML. Junto a esto, existen bibliotecas que implementan el trabajo con modelos tridimensionales , entre ellos tres

Soporte

ES DECIR Firefox safari Cromo Ópera iOS Androide
9.0+ 3.0+ 3.0+ 3.0+ 10.0+ 3.0+ 1.0+

Características

canvasle permite colocar en el lienzo: imagen, video, texto. Rellénelo todo con un color sólido, acaricie los contornos o incluso agregue un degradado [9] . Agregar sombras similares a las propiedades css3 box-shadow y text-shadow. Y finalmente, dibujar formas especificando puntos de control. Además, puede cambiar tanto el ancho de las líneas como el pincel de dibujo de líneas, el estilo de las conexiones de línea [10] .

Características

Ejemplos o patrones de optimización

Si no necesita volver a dibujar el lienzo, pero necesita manipularlo, puede "tomar una foto" de todo el lienzo y guardarlo en una variable. Y trabaje ya con este dibujo, sin forzar el dibujo del lienzo después de cada manipulación.

Si no se debe actualizar toda la imagen, sino solo una parte, puede borrar un área determinada en el lienzo y dibujarla nuevamente.

Los navegadores pueden optimizar las animaciones que se ejecutan al mismo tiempo al reducir la cantidad de reflujo y repintado a uno, lo que a su vez mejorará la precisión de la animación. Por ejemplo, animaciones JavaScript sincronizadas con transiciones CSS o SVG SMIL. Además, si se realiza una animación en una pestaña que es invisible, los navegadores no seguirán redibujando, lo que generará menos CPU, GPU, uso de memoria y, como resultado, reducirá el consumo de batería en los dispositivos móviles [15] . Para hacer esto, use requestAnimationFrame.

Todos los navegadores actuales tienen un filtro de desenfoque de imagen al hacer zoom. Debe usarse si procesa la imagen píxel por píxel con frecuencia. Reduciendo la imagen, por ejemplo, a la mitad y luego aumentándola en hardware usando un filtro [16] .

Si el juego te permite procesar por separado el fondo y los elementos del juego, entonces tiene sentido hacer dos lienzos uno encima del otro [17] .

Para borrar el lienzo, la mejor manera es usar clearRect [17] , sin embargo, si borra solo las áreas necesarias, la velocidad aumentará aún más.

Crítica

Beneficios

Uso

El uso y las operaciones en el elemento solo son posibles a través de JavaScript.

<!doctype html> < html lang = "en" > < head > < title > canvas </ title > < script src = "example.js" ></ script > </ head > < body > < canvas id = " canvas" > Este elemento no es compatible </ canvas > </ body > </ html >

archivo ejemplo.js

var lienzo = documento . getElementById ( 'lienzo' ), contexto = lienzo . getContext ( '2d' ); function onLoadHandler () { /* Hacer algo con el lienzo siguiente */ } ventana . onload = onLoadHandler ;

Ejemplos

Usar JavaScript para dibujar un círculo < html lang = "en" > < head > < title > circle </ title > </ head > < body > < canvas id = "example" > Actualizar el navegador </ canvas > < script > var canvas = document . getElementById ( 'ejemplo' ), contexto = lienzo . getContext ( '2d' ); función dibujarCirculo ( x , y , r ) { contexto . arco ( x , y , r , 0 , 2 * Math . PI , false ); } contexto . rutaInicio (); dibujarCirculo ( 150 , 75 , 50 ); contexto _ ancho de línea = 15 ; contexto _ EstiloTrazo = '#0f0' ; contexto _ trazo (); </ script > </ cuerpo > </ html > Representación sobre lienzo de un árbol pitagórico volado < html > < cabeza > < título > árbol de Pitágoras </ título > < tipo de script = "text/javascript" > // la función dibuja una línea en ángulo desde un punto especificado de longitud ln función dibujarLínea ( x , y , ln , ángulo ) { contexto . mover a ( x , y ); contexto _ lineTo ( Math . round ( x + ln * Math . cos ( ángulo )), Math . round ( y - ln * Math . sin ( ángulo ))); } // La función dibuja el árbol function dibujarÁrbol ( x , y , ln , minLn , ángulo ) { if ( ln > minLn ) { ln = ln * 0.75 ; dibujarLínea ( x , y , ln , ángulo ); x = Matemáticas . redondo ( x + ln * Math . cos ( ángulo )); y = Matemáticas . ronda ( y - ln * Math . sin ( ángulo )); dibujarÁrbol ( x , y , ln , minLn , ángulo + Math . PI / 4 ); dibujarÁrbol ( x , y , ln , minLn , ángulo - Math . PI / 6 ); // si pones el angulo Math.PI/4, entonces saldra el arbol clasico } } // Inicializacion de variables function init () { var canvas = document . getElementById ( "árbol" ), x = 100 + ( lienzo . ancho / 2 ), y = 170 + lienzo . altura , // posición del tallo ln = 120 , // longitud inicial de la línea minLn = 5 ; // lienzo de longitud de línea mínima . ancho = 480 ; // Ancho del lienzo lienzo . altura = 320 ; // contexto de altura del lienzo = lienzo . getContext ( '2d' ); contexto _ EstiloRelleno = '#ddf' ; // contexto de color de fondo . EstiloTrazo = '#020' ; // contexto de color de línea . fillRect ( 0 , 0 , lienzo . ancho , lienzo . alto ); contexto _ ancho de línea = 2 ; // contexto de ancho de línea . rutaInicio (); dibujarÁrbol ( x , y , ln , minLn , Math . PI / 2 ); contexto _ trazo (); } ventana _ onload = init ; </ script > </ head > < cuerpo > < lienzo id = "árbol" ></ lienzo > </ cuerpo > </ html >

Bibliotecas

  • libCanvas es un marco de lienzo ligero pero potente.
  • Processing.js: un puerto del lenguaje de visualización de procesamiento
  • EaselJS es una biblioteca con una API similar a Flash
  • PlotKit: una biblioteca para crear tablas y gráficos
  • Rekapi: API de lienzo para crear animaciones en fotogramas clave
  • PhiloGL es un marco WebGL para visualización de datos, desarrollo de juegos y codificación creativa.
  • JavaScript InfoVis Toolkit: crea una visualización de datos de Canvas 2D interactiva para la Web.
  • Frame-Engine es un framework para desarrollar aplicaciones y juegos.

Véase también

Notas

  1. ↑ 1 2 Guía de Canvas (MDN) . Consultado el 23 de marzo de 2015. Archivado desde el original el 30 de marzo de 2015.
  2. ↑ 1 2 3 4.12.4 El elemento canvas: estándar HTML . Archivado desde el original el 27 de abril de 2009.
  3. ↑ Lienzo (MDN) . Consultado el 23 de marzo de 2015. Archivado desde el original el 25 de marzo de 2015.
  4. ↑ Un ejemplo de construcción de captcha por puntos . Archivado el 19 de diciembre de 2013.
  5. ↑ explorercanvas (enlace descendente) . Fecha de acceso: 7 de febrero de 2013. Archivado desde el original el 11 de febrero de 2013. 
  6. ↑ Google promueve HTML5 como plataforma de juegos (enlace descendente) . Fecha de acceso: 7 de febrero de 2013. Archivado desde el original el 11 de febrero de 2013. 
  7. ↑ Especificación de WHATWG (enlace no disponible) . Fecha de acceso: 7 de febrero de 2013. Archivado desde el original el 11 de febrero de 2013. 
  8. ↑ Lienzo 3D de Mozilla . Fecha de acceso: 7 de febrero de 2013. Archivado desde el original el 12 de marzo de 2013.
  9. ↑ Gradientes (enlace inaccesible) . Fecha de acceso: 7 de febrero de 2013. Archivado desde el original el 11 de febrero de 2013. 
  10. ↑ Trabajemos con líneas (enlace inaccesible) . Consultado el 8 de febrero de 2013. Archivado desde el original el 11 de febrero de 2013. 
  11. ↑ ¿Es posible "recargar" el lienzo? // Pregúntele al profesor Markap (el enlace está caído) . Fecha de acceso: 5 de julio de 2013. Archivado desde el original el 7 de julio de 2013. 
  12. ↑ Coordenadas del lienzo (enlace no disponible) . Fecha de acceso: 5 de julio de 2013. Archivado desde el original el 7 de julio de 2013. 
  13. ↑ Transformaciones de lienzo en un lenguaje accesible (enlace inaccesible) . Fecha de acceso: 5 de julio de 2013. Archivado desde el original el 7 de julio de 2013. 
  14. ↑ Pregúntele al profesor Markup: P. ¿Hay un lienzo 3D? (enlace no disponible) . Fecha de acceso: 7 de febrero de 2013. Archivado desde el original el 11 de febrero de 2013. 
  15. ↑ Animaciones avanzadas con requestAnimationFrame (enlace descendente) . Consultado el 8 de febrero de 2013. Archivado desde el original el 11 de febrero de 2013. 
  16. ↑ 1 2 Cómo liberar el poder de HTML5 Canvas para juegos . Consultado el 3 de noviembre de 2013. Archivado desde el original el 3 de noviembre de 2013.
  17. ↑ 1 2 Mejora del rendimiento de HTML5 Canvas - HTML5 Rocks . Consultado el 3 de noviembre de 2013. Archivado desde el original el 4 de noviembre de 2013.
  18. ↑ 1 2 3 4 5 6 ¿Cuáles son las ventajas/desventajas de Canvas vs. ¿DOM en el desarrollo de juegos JavaScript? . Consultado el 3 de noviembre de 2013. Archivado desde el original el 4 de noviembre de 2013.
  19. ↑ Lienzo acelerado por hardware en Google Chrome . Consultado el 3 de noviembre de 2013. Archivado desde el original el 3 de noviembre de 2013.

Enlaces

Ejemplos de trabajo Para información
 Gráficos en la Web
Vector
Ráster