Crea áreas de dibujo para JavaScript con canvas
Con el elemento HTML <canvas> puedes crear un área para gráficos o animaciones utilizando JavaScript. Para ello, se crea un objeto de contexto 2D. Luego, con varios métodos de la API de la etiqueta <canvas> defines el contenido deseado.
¿Qué es la etiqueta HTML canvas?
HTML <canvas> es un elemento que proporciona un área de dibujo en la que puedes generar gráficos o animaciones con JavaScript. El área disponible se define mediante las especificaciones de altura y anchura. El espacio puede integrarse en cualquier parte de un documento HTML utilizando esta práctica etiqueta HTML.
El contenido de este “lienzo” (canvas en español) no es en realidad parte de la página web, por lo que no es posible aplicar CSS u otros elementos HTML. Si un navegador no es compatible con la etiqueta HTML <canvas>, el contenido se mostrará como un fallback. Sin embargo, los navegadores modernos admiten el elemento de manera nativa.
- 3x más rápido, ahora un 60 % de ahorro
- Alta disponibilidad >99.99 %
- Solo en IONOS: hasta 500 GB incluidos
Sintaxis de la etiqueta HTML <canvas>
El elemento HTML-<canvas> por sí solo no proporciona herramientas para el diseño, sino que simplemente crea el marco en el que puedes insertar gráficos con JavaScript. La sintaxis básica del elemento es la siguiente:
<canvas id="EjemploCanvas" width="[Valor en píxeles]" height="[Valor en píxeles]"></canvas>Nombras el elemento a través de id y le asignas las dimensiones deseadas con width y height. Opcionalmente, puedes usar otros parámetros para precisar el diseño del gráfico.
Funcionamiento de <canvas> explicado con un ejemplo sencillo
Con la sintaxis anterior, puedes crear en cualquier momento un área simple. En nuestro siguiente ejemplo, esta área tendrá una longitud de 500 píxeles y una altura de 250 píxeles. Este es el código adecuado:
<!DOCTYPE html>
<html>
<body>
<h1>Ejemplo de HTML canvas</h1>
<canvas id="EjemploCanvas" width="500" height="250" style="border: 1px solid grey"></canvas>
</body>
</html>Sin embargo, de esta manera solo obtienes un área vacía. Solo con JavaScript puedes llenar el elemento HTML <canvas> generado con formas, imágenes, textos o degradados, y animar estos objetos si es necesario. El contenido se almacena en forma de píxeles en un mapa de bits. Posteriormente, este se puede convertir en un gráfico PNG.
Para usar el elemento, utiliza el método getElementById(). Esto solo funciona si has asignado una ID única al área <canvas>. Si deseas pintar, dibujar o interactuar de alguna manera en el área especificada, debes crear un objeto de contexto 2D. Para nuestro ejemplo anterior, esto se logra con el siguiente código:
const EjemploCanvas = document.getElementById("EjemploCanvas");
const ctx = EjemploCanvas.getContext("2d");Ahora todo está listo para usar el elemento HTML <canvas>. Con la función fillRect(), ahora podemos colocar un simple rectángulo en el área definida. Este será de color verde azulado (teal en inglés), tendrá 200 píxeles de ancho y 150 píxeles de alto. Lo colocamos a 10 píxeles del borde izquierdo y a 50 píxeles del borde superior. El código completo es el siguiente:
<!DOCTYPE html>
<html>
<body>
<h1>Ejemplo de HTML canvas</h1>
<canvas id="EjemploCanvas" width="500" height="250" style="border:1px solid grey"></canvas>
<script>
const EjemploCanvas = document.getElementById("EjemploCanvas");
const ctx = EjemploCanvas.getContext("2d");
ctx.fillStyle = "teal";
ctx.fillRect(10, 50, 200, 150);
</script>
</body>
</html>¿Para qué se puede utilizar <canvas>?
Mientras que en nuestro ejemplo anterior solo hemos dibujado un simple rectángulo, con el elemento <canvas> se pueden realizar formas de representación mucho más complejas. Entre otras cosas, se pueden hacer arcos circulares, textos, transparencias, degradados de color y gráficos en formatos GIF, JPEG y PNG. Estos se pueden recortar, escalar y posicionar libremente. Además, las animaciones se pueden implementar de una etiqueta HTML <canvas> utilizando la función de tiempo de JavaScript.
¿Qué dimensiones puede tener un elemento <canvas>?
Las dimensiones máximas posibles para <canvas> varían según el navegador y el entorno. Para iOS, por ejemplo, el límite es de 4096 x 4096 píxeles, mientras que otros sistemas permiten tamaños de más de 10 000 x 10 000 píxeles. Sin embargo, como el área siempre se ajusta a la relación de aspecto, los elementos son responsivos y, por lo tanto, son adecuados para diferentes dispositivos.
Resumen de los métodos para la API de <canvas>
Ya hemos hablado sobre la creación de un objeto de contexto 2D. Con un objeto de este tipo integrado mediante getContext(“2d”), puedes llenar el área <canvas> en cualquier momento. A continuación, hemos resumido los métodos más importantes dentro de la API.
Texto
| Método | Descripción |
|---|---|
font
|
Establece la fuente para el contenido de texto |
fillText()
|
Añade texto (completamente relleno) en el <canvas>
|
strokeText()
|
Añade texto (solo contornos) |
Imagen
| Método | Descripción |
|---|---|
drawImage()
|
Coloca una imagen o video dentro de un elemento <canvas>
|
Dibujo
| Método | Descripción |
|---|---|
fillRect()
|
Dibuja un rectángulo relleno |
strokeRect()
|
Dibuja un rectángulo vacío |
clearRect()
|
Limpia ciertos píxeles dentro de un rectángulo |
Rutas
| Método | Descripción |
|---|---|
beginPath()
|
Inicia una nueva ruta |
lineTo()
|
Dibuja una línea en la ruta |
moveTo()
|
Mueve la ruta a un punto dentro del lienzo |
Diseño
| Método | Descripción |
|---|---|
addColorStop()
|
Establece los colores y las posiciones para un degradado |
createLinearGradient()
|
Crea un degradado lineal |
createPattern()
|
Repite un elemento |
shadowBlur
|
Establece el desenfoque para una sombra |
shadowColor
|
Define el color de una sombra |
Otras funciones
| Método | Descripción |
|---|---|
restore()
|
Restaura un estado anterior |
save()
|
Guarda el estado actual y todos sus atributos |
Ejemplo de <canvas > con texto y degradado de color
Ahora utilizaremos algunos de estos métodos para nuestro ejemplo final. Primero, creamos un marco de 500 x 250 Pixel mediante una etiqueta HTML <canvas>. Luego, creamos un objeto de contexto 2D. Finalmente, agregamos un título y otra oración, que tendrá un degradado de color. El código correspondiente es el siguiente:
<!DOCTYPE html>
<html>
<body>
<h1>Ejemplo de lienzo con texto y un degradado de color</h1>
<h2>Usamos los métodos strokeText() y gradient</h2>
<canvas id="EjemploCanvas" width="500" height="250" style="border:1px solid grey"></canvas>
<script>
const c = document.getElementById("EjemploCanvas");
const ctx = c.getContext("2d");
ctx.font = "40px Calibri";
ctx.strokeText("Aquí está el título", 20, 50);
ctx.font = "30px Calibri";
var gradient = ctx.createLinearGradient(0, 0, c.width, 0);
gradient.addColorStop("0", "teal");
gradient.addColorStop("0.5", "blue");
gradient.addColorStop("1.0", "green");
ctx.strokeStyle = gradient;
ctx.strokeText("Aquí hay otra frase", 20, 90);
</script>
</body>
</html>- Tu dominio protegido con Certificado SSL Wildcard gratis
- Función Domain Connect para una configuración DNS simplificada gratis
- Registro privado y gratis para mayor seguridad