Tutorial de lienzo HTML
El elemento HTML <canvas> se utiliza para dibujar gráficos en una página web.
El gráfico anterior se crea con <canvas>.
Muestra cuatro elementos: un rectángulo rojo, un rectángulo degradado, un rectángulo multicolor y un texto multicolor.
¿Qué es el lienzo HTML?
El elemento HTML <canvas> se utiliza para dibujar gráficos, sobre la marcha, a través de secuencias de comandos (normalmente JavaScript).
El elemento <canvas> es solo un contenedor de gráficos. Debe usar un script para dibujar los gráficos.
Canvas tiene varios métodos para dibujar rutas, cuadros, círculos, texto y agregar imágenes.
Compatibilidad con navegador
Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con el elemento <canvas>.
| Element | |||||
|---|---|---|---|---|---|
| <canvas> | 4.0 | 9.0 | 2.0 | 3.1 | 9.0 |
HTML Canvas puede dibujar texto
Canvas puede dibujar texto colorido, con o sin animación.
HTML Canvas puede dibujar gráficos
Canvas tiene excelentes funciones para la presentación de datos gráficos con imágenes de gráficos y tablas.
El lienzo HTML se puede animar
Los objetos de lienzo se pueden mover. Todo es posible: desde simples pelotas que rebotan hasta animaciones complejas.
HTML Canvas puede ser interactivo
Canvas puede responder a eventos de JavaScript.
Canvas puede responder a cualquier acción del usuario (clics de teclas, clics del mouse, clics de botones, movimiento de los dedos).
HTML Canvas se puede usar en juegos
Los métodos de Canvas para animaciones ofrecen muchas posibilidades para las aplicaciones de juegos HTML.
Ejemplo de lienzo
En HTML, un elemento <canvas> se ve así:
<canvas id="myCanvas" width="200" height="100"></canvas>
El elemento <canvas> debe tener un atributo id para que JavaScript pueda hacer referencia a él.
El atributo ancho y alto es necesario para definir el tamaño del lienzo.
Sugerencia: puede tener varios elementos <canvas> en una página HTML.
De forma predeterminada, el elemento <canvas> no tiene borde ni contenido.
Para agregar un borde, use un atributo de estilo:
Ejemplo
<canvas id="myCanvas" width="200" height="100"
style="border:1px solid
#000000;"></canvas>
Los siguientes capítulos muestran cómo dibujar en el lienzo.