El HTML <canvas> elemento se utiliza para dibujar gráficos en una página web.
El gráfico a la izquierda se crea con <canvas> . Se muestra cuatro elementos: un rectángulo rojo, un rectángulo de gradiente, un rectángulo multicolor, y un texto multicolor.
¿Qué es HTML Canvas?
El HTML <canvas> elemento se utiliza para dibujar gráficos, sobre la marcha, a través de secuencias de comandos (usually JavaScript) .
La <canvas> elemento es solamente un contenedor para los gráficos. Se debe utilizar una secuencia de comandos para llamar la realidad de los gráficos.
Lona tiene varios métodos para trazar caminos, cajas, círculos, texto y añadir imágenes.
Soporte para el navegador
Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con el <canvas> elemento.
| Elemento | |||||
|---|---|---|---|---|---|
| <canvas> | 4.0 | 9.0 | 2.0 | 3.1 | 9.0 |
HTML Canvas puede dibujar texto
Lienzo puede dibujar texto colorido, con o sin animación.
HTML Canvas puede dibujar gráficos
Lona tiene grandes características para la presentación gráfica de datos con un imaginario de gráficos y tablas.
HTML lienzo puede ser animado
objetos de lona se puede mover. Todo es posible: desde pelotas de rebote a simples animaciones complejas.
HTML lienzo puede ser interactivo
Lienzo puede responder a eventos de JavaScript.
Lienzo puede responder a cualquier acción del usuario (clics clave, clics del ratón, clics en botones de movimiento del dedo).
HTML vista puede usarse en los Juegos
métodos de lona 'para animaciones, ofrecen una gran cantidad de posibilidades para las aplicaciones de juegos HTML.
Ejemplo de lona
En HTML, un <canvas> elemento es el siguiente:
<canvas id="myCanvas" width="200" height="100"></canvas>La <canvas> elemento debe tener un atributo id para que pueda ser referida por JavaScript.
El atributo de anchura y altura, es necesario definir el tamaño de la lona.
Tip: Puede tener múltiples <canvas> elementos en una página HTML.
Por defecto, el <canvas> elemento no tiene borde y ningún contenido.
Para añadir un borde, utilice un atributo de estilo:
Ejemplo
<canvas id="myCanvas" width="200" height="100"
style="border:1px solid
#000000;">
</canvas>
Inténtalo tú mismo " Los siguientes capítulos muestran cómo dibujar en el lienzo.