HTML Canvas: La guía completa
El elemento HTML <canvas> se utiliza para dibujar gráficos en una página web.
El siguiente gráfico que se muestra está creado con <canvas>. Muestra cuatro elementos: un rectángulo rojo, un rectángulo degradado, un rectángulo multicolor y un texto multicolor.
¿Qué es HTML Canvas?
El elemento HTML <canvas> se utiliza para dibujar gráficos, sobre la marcha, mediante JavaScript.
El elemento <canvas> es solo un contenedor de gráficos. Debes usar JavaScript para dibujar los gráficos.
Canvas tiene varios métodos para dibujar trazados, cuadrados, círculos, textos y agregar imágenes.
Canvas es compatible con todos los navegadores principales.
Ejemplos
Un elemento <canvas> es un área rectangular en una página HTML. Por defecto, un canvas no tiene borde ni contenido.
El marcado se ve así:
<canvas id="myCanvas" width="200" height="100"></canvas>
id, width y height para definir el tamaño del canvas. Para agregar un borde, usa el atributo style, o directamente desde CSS.A continuación, se muestra un ejemplo de un elemento <canvas> vacío y básico:
👇Aquí hay algunos ejemplos👇
Dibuja una línea
Ejemplo:
Dibuja un círculo
Ejemplo:
Dibuja un texto
Ejemplo:
Texto trazado
Ejemplo:
Degradado lineal
Ejemplo:
Degradado circular
Ejemplo:
Dibuja una imagen
Ejemplo:
Aprende más sobre Canvas
Para aprender más sobre HTML <canvas>, vaya al tutorial HTML Canvas de W3Schools y aprende gratis.
El contenido de este artículo fue inspiración original del tutorial HTML Canvas Graphics de W3Schools.
"La mejor manera de aprender a programar es practicando todos los días"
