Canvas

El elemento canvas permite representar gráficos en un lienzo de mapa de bits que depende de la resolución.Para dibujar en el lienzo se usan “contextos”, como el contexto 2D de Canvas, que se define en la especificación Contexto 2D de Canvas HTML. Windows Internet Explorer 9 comenzó a admitir el elemento Canvas usando la API de dibujo de Canvas en 2D como contexto (en Internet Explorer 9, el contexto 2D de Canvas se representa por medio del objeto CanvasRenderingContext2D o la interfaz ICanvasRenderingContext2D). Como sucede con todos los gráficos en Internet Explorer 9, los lienzos se aceleran por hardware mediante Windows y la GPU.

Con los lienzos se pueden dibujar escenarios en los que haya rectángulos, trazados, líneas, rellenos, arcos y curvas de Bézier y cuadráticas. Además, el elemento Canvas en Internet Explorer 9 admite los atributos width y height (los valores predeterminados de ancho y alto son 300 y 150 píxeles respectivamente, mientras que el color predeterminado es negro transparente).

Canvas es una forma de programar gráficos en Internet. La etiqueta canvas es una superficie de dibujo bidimensional de “modo inmediato” (en el sentido de que los comandos de dibujo se envían directamente al hardware de gráficos) que se puede usar para lograr animaciones, gráficos o juegos interactivos en tiempo real sin tener que descargar un complemento por separado. Debido a las API definidas por el objeto CanvasRenderingContext2D, Canvas da cabida a escenarios como los siguientes:

Puedes usar JavaScript para animar los dibujos de Canvas o crear experiencias interactivas que reaccionen ante una entrada de teclado, un clic del mouse o cualquier otro evento de explorador. Por ejemplo, en este ejemplo del sitio de versiones de prueba de Internet Explorer se generan, con apenas unas pocas líneas de JavaScript, líneas resplandecientes de color y dispuestas de forma aleatoria.

Internet Explorer 9 y las versiones posteriores admiten las siguientes API de contexto 2D de Canvas (miembros expuestos por el objeto CanvasRenderingContext2D):

A partir de IE11, también se admiten las siguientes API de contexto 2D de Canvas, nivel 2:

  • la propiedad msImageSmoothingEnabled, para elegir entre el ajuste de escala bilineal tradicional o el ajuste de escala de vecino más próximo al agrandar imágenes de tamaño reducido.
  • compatibilidad con el valor de regla de relleno even-odd en los métodos fill, clip y isPointInPath del lienzo. Además de los atributos de regla de relleno estándar del W3C, IE11 ofrece msFillRule, una propiedad de regla de relleno global. Esta propiedad establece la regla de relleno en todos los métodos en lugar de establecer de manera individual la regla de relleno en cada uno de ellos.
  • los métodos setLineDash, getLineDash y lineDashOffset, para crear patrones personalizados de guion de trazo.

Referencia de API

Canvas

Ejemplos y tutoriales

Cómo crear gráficos 3D mediante Canvas
Cómo asignar puntos entre sistemas de coordenadas 2D
Cómo crear efectos especiales en Canvas
Muestreo de colores de imágenes con Canvas
Cómo usar Canvas para crear un juego ambientado en el espacio
Cómo elegir entre SVG y Canvas
Ejemplos de uso de SVG y Canvas

Demostraciones de la versión de prueba de Internet Explorer

Canvas Pad
Canvas Pinball
Canvas Zoom
Galactic HTML5 Performance Test
HTML5 Blizzard
Mr. Potato Gun
Particle Acceleration

Publicaciones de IEBlog

Galactic: crear un sistema solar 3D con HTML5
HTML5 nativo: primera vista previa de la plataforma de IE10 disponible para descarga
HTML5 Blizzard: aceleración por hardware total en acción
Depurar problemas de Canvas comunes
IE9 incluye Canvas acelerado por hardware
Consideraciones sobre cuándo usar Canvas y SVG

Especificación

Contexto 2D de Canvas HTML

Temas relacionados

Una introducción al elemento Canvas HTML5
Detrás de escena de TRON: cómo compilar un sitio de libro digital con HTML5
Guía del desarrollador de Canvas HTML5
Cómo crear una biblioteca visual de imágenes en Canvas HTML5
Cómo crear un juego de bloques de ladrillo con Canvas y SVG de HTML5
Cómo crear asteroides con el motor de juegos de HTML5 Impact
Moderniza tus juegos con Canvas HTML5: parte 1, ajuste de escala de hardware y CSS3
Moderniza tus juegos con Canvas HTML5: parte 2, sin conexión, arrastrar y colocar y API de archivo
Juegos HTML5: Cómo animar duendecillos en Canvas con EaselJS
Revela el poder del Canvas HTML5 acelerado por hardware

 

 

Mostrar:
© 2014 Microsoft