Tutoriales de HTML Canvas
- Página anterior Manual de referencia de SVG
- Página siguiente Dibujo de Canvas
El elemento <canvas> de HTML se utiliza para dibujar gráficos en la página web.
El gráfico superior se creó usando <canvas>.
Muestra cuatro elementos: rectángulo rojo, rectángulo de gradiente, rectángulo multicolor y texto multicolor.
¿Qué es el Canvas HTML?
El elemento <canvas> HTML se utiliza para dibujar gráficos dinámicamente a través de scripts (generalmente JavaScript).
El elemento <canvas> es solo un contenedor de gráficos. Debe usar scripts para dibujar gráficos reales.
Canvas tiene varios métodos para dibujar rutas, cuadrados, círculos, texto y agregar imágenes.
El Canvas HTML puede dibujar texto
Canvas puede dibujar texto en color, incluso con efectos de animación.
El Canvas HTML puede dibujar gráficos
Canvas tiene la capacidad poderosa de presentar datos gráficos y gráficos usando gráficos y gráficos.
El Canvas HTML puede animarse
Los objetos Canvas pueden moverse. Todo es posible: desde un simple pelota saltarina hasta animaciones complejas.
El Canvas HTML es interactivo
Canvas puede responder a eventos de JavaScript.
Canvas puede responder a cualquier acción del usuario (clic de tecla, clic de ratón, clic de botón, movimiento de dedo).
El Canvas HTML se puede usar para juegos
Los métodos de animación de Canvas proporcionan muchas posibilidades para aplicaciones de juegos HTML.
Ejemplo de Canvas
En HTML, el elemento <canvas> se ve así：
<canvas id="myCanvas" width="200" height="100"></canvas>
El elemento <canvas> debe tener una propiedad id para que JavaScript pueda referirse a él.
Las propiedades width y height son necesarias para definir el tamaño del lienzo.
Consejo: una página HTML puede tener múltiples elementos <canvas>.
Por defecto, el elemento <canvas> no tiene borde ni contenido.
Para agregar un borde, utilice la propiedad style：
Ejemplo
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>
Los siguientes capítulos presentarán cómo dibujar en el lienzo.
Por favor, consulte también：
Compatibilidad del navegador
<canvas> es un elemento del estándar HTML5 (2014).
Todos los navegadores modernos admiten <canvas>：
| Chrome | Edge | Firefox | Safari | Opera | IE |
|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera | IE |
| Soporte | Soporte | Soporte | Soporte | Soporte | 9-11 |
- Página anterior Manual de referencia de SVG
- Página siguiente Dibujo de Canvas
