1. Introducción a HTML Canvas
El elemento <canvas> en HTML se utiliza para dibujar gráficos en una página web.
Es un contenedor para gráficos que permite realizar representaciones visuales dinámicas a través de
JavaScript.
Para crear gráficos, necesitas utilizar JavaScript, ya que el <canvas> por sí solo
no puede dibujar. Con el Canvas, puedes realizar diversas operaciones, como dibujar rutas, cajas,
círculos, texto y añadir imágenes.
El gráfico a continuación muestra diferentes elementos que se pueden crear utilizando
<canvas>: un rectángulo rojo, un rectángulo de gradiente, un rectángulo
multicolor y texto multicolor.
Además, el Canvas es compatible con todos los principales navegadores, lo que lo convierte en una herramienta versátil para desarrolladores web.
Ejemplo
Código del ejemplo
// Código para el ejemplo visual
<canvas id="miCanvas" width="400" height="200" style="border:1px solid #000000;width: 100%; height: auto;"></canvas>
<script>
var canvas = document.getElementById('miCanvas');
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'green';
ctx.fillRect(10, 10, 150, 100);
</script>
...
2. Configuración del Lienzo
Para utilizar el elemento <canvas>, primero debes configurarlo correctamente en tu
documento HTML. El elemento <canvas> se define con el atributo width
y height para establecer el tamaño del lienzo.
El siguiente código muestra cómo crear un lienzo con un ancho de 400 píxeles y una altura de 200 píxeles. También puedes aplicar estilos CSS para personalizar su apariencia, como bordes y fondos.
Ejemplo
Código del ejemplo
<canvas id="miLienzo" width="400" height="200" style="border:1px solid #000000;width: 100%; height: auto;"></canvas>
3. Introducción a JavaScript y Canvas
JavaScript es un lenguaje de programación que permite crear contenido interactivo en la web. Cuando
se trabaja con el elemento <canvas>, JavaScript se utiliza para dibujar y
manipular gráficos en el lienzo.
La interacción entre JavaScript y Canvas se logra a través del contexto de dibujo que proporciona el lienzo. Puedes utilizar JavaScript para realizar tareas como dibujar formas, aplicar colores, y animar gráficos en tiempo real.
En el siguiente ejemplo, veremos cómo inicializar el contexto de un lienzo y dibujar un simple rectángulo en él utilizando JavaScript.
Ejemplo
Código del ejemplo
<canvas id="canvasJS" width="400" height="200" style="border:1px solid #000000;width: 100%; height: auto;"></canvas>
<script>
var canvas = document.getElementById('canvasJS');
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'blue';
ctx.fillRect(50, 50, 100, 50);
</script>
4. Ejemplos de Dibujo en Canvas
Ejemplo: Dibujar una Línea
Código del ejemplo
<canvas id="canvasLinea" width="400" height="200" style="border:1px solid #000000;width: 100%; height: auto;"></canvas>
<script>
var c = document.getElementById("canvasLinea");
var ctx = c.getContext("2d");
ctx.moveTo(0, 0); // Comienza en la esquina superior izquierda
ctx.lineTo(400, 200); // Termina en la esquina inferior derecha
ctx.strokeStyle = 'red'; // Cambia el color de la línea
ctx.lineWidth = 5; // Establece el grosor de la línea
ctx.stroke();
</script>
Ejemplo: Dibujar un Círculo
Código del ejemplo
<canvas id="canvasCirculo" width="400" height="200" style="border:1px solid #000000;width: 100%; height: auto;"></canvas>
<script>
var c = document.getElementById("canvasCirculo");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(200, 100, 50, 0, 2 * Math.PI); // (x, y, radio, ángulo de inicio, ángulo de final)
ctx.fillStyle = 'blue'; // Color de relleno
ctx.fill(); // Rellena el círculo
ctx.strokeStyle = 'black'; // Color del borde
ctx.lineWidth = 2; // Grosor del borde
ctx.stroke(); // Dibuja el borde
</script>
Ejemplo: Dibujar un Cuadrado
Código del ejemplo
<canvas id="canvasCuadrado" width="400" height="200" style="border:1px solid #000000;width: 100%; height: auto;"></canvas>
<script>
var c = document.getElementById("canvasCuadrado");
var ctx = c.getContext("2d");
ctx.fillStyle = 'green'; // Color de relleno
ctx.fillRect(150, 75, 100, 100); // (x, y, ancho, alto)
ctx.strokeStyle = 'black'; // Color del borde
ctx.lineWidth = 2; // Grosor del borde
ctx.strokeRect(150, 75, 100, 100); // Dibuja el borde del cuadrado
</script>
Ejemplo: Dibujar "Hello Mundo"
Código del ejemplo
<canvas id="canvasTexto" width="400" height="200" style="border:1px solid #000000;width: 100%; height: auto;"></canvas>
<script>
var c = document.getElementById("canvasTexto");
var ctx = c.getContext("2d");
ctx.font = "30px Arial"; // Define la fuente y el tamaño
ctx.fillStyle = "purple"; // Color del texto
ctx.fillText("Hello Mundo", 100, 100); // Dibuja el texto en (x, y)
</script>
Ejemplo: Dibujar "Hello Mundo" con Contorno
Código del ejemplo
<canvas id="canvasTextoContorno" width="400" height="200" style="border:1px solid #000000;width: 100%; height: auto;"></canvas>
<script>
var c = document.getElementById("canvasTextoContorno");
var ctx = c.getContext("2d");
ctx.font = "30px Arial"; // Define la fuente y el tamaño
ctx.strokeStyle = "blue"; // Color del contorno
ctx.lineWidth = 2; // Grosor del contorno
ctx.strokeText("Hello Mundo", 50, 100); // Dibuja el contorno del texto en (x, y)
</script>
Ejemplo: Degradado Lineal
Código del ejemplo
<canvas id="canvasGradient" width="400" height="200" style="border:1px solid #000000;width: 100%; height: auto;"></canvas>
<script>
var c = document.getElementById("canvasGradient");
var ctx = c.getContext("2d");
// Crear un degradado lineal
var gradient = ctx.createLinearGradient(0, 0, 400, 0); // (x0, y0, x1, y1)
gradient.addColorStop(0, "red"); // Color inicial
gradient.addColorStop(1, "yellow"); // Color final
// Rellenar el fondo con el degradado
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, c.width, c.height); // Rellenar todo el canvas
// Dibujar el texto encima del degradado
ctx.font = "30px Arial"; // Define la fuente y el tamaño
ctx.fillStyle = "blue"; // Color del texto
ctx.fillText("Hello Mundo", 100, 100); // Dibuja el texto en (x, y)
</script>
Ejemplo: Degradado Radial
Código del ejemplo
<canvas id="canvasRadial" width="400" height="200" style="border:1px solid #000000;width: 100%; height: auto;"></canvas>
<script>
var c = document.getElementById("canvasRadial");
var ctx = c.getContext("2d");
// Crear un degradado radial
var gradient = ctx.createRadialGradient(200, 100, 20, 200, 100, 150); // (x0, y0, r0, x1, y1, r1)
gradient.addColorStop(0, "blue"); // Color en el centro
gradient.addColorStop(1, "white"); // Color en el borde
// Rellenar el fondo con el degradado
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, c.width, c.height); // Rellenar todo el canvas
// Dibujar el texto encima del degradado
ctx.font = "30px Arial"; // Define la fuente y el tamaño
ctx.fillStyle = "black"; // Color del texto
ctx.fillText("Hello Mundo", 100, 100); // Dibuja el texto en (x, y)
</script>
Ejemplo: Dibujar un Sol
Código del ejemplo
<canvas id="canvasSol" width="400" height="400" style="border:1px solid #000000;width: 100%; height: auto;"></canvas>
<script>
var c = document.getElementById("canvasSol");
var ctx = c.getContext("2d");
// Dibujar el círculo del sol
ctx.fillStyle = "yellow";
ctx.beginPath();
ctx.arc(200, 200, 50, 0, Math.PI * 2); // (x, y, radio, inicio, fin)
ctx.fill();
ctx.stroke(); // Dibuja el borde del sol
// Función para dibujar un rayo puntiagudo
function drawPointedRay(x, y, angle) {
ctx.beginPath();
ctx.moveTo(x, y); // Punto de inicio del rayo
ctx.lineTo(x + 60 * Math.cos(angle), y + 60 * Math.sin(angle)); // Rayo puntiagudo
ctx.lineWidth = 4; // Grosor del rayo
ctx.strokeStyle = "orange"; // Color del rayo
ctx.stroke();
}
// Función para dibujar un rayo curvado
function drawCurvedRay(x, y, angle) {
ctx.beginPath();
ctx.moveTo(x, y); // Punto de inicio del rayo
ctx.quadraticCurveTo(
x + 30 * Math.cos(angle),
y + 30 * Math.sin(angle),
x + 60 * Math.cos(angle),
y + 60 * Math.sin(angle)
); // Curva
ctx.lineWidth = 4; // Grosor del rayo
ctx.strokeStyle = "orange"; // Color del rayo
ctx.stroke();
}
// Dibujar los rayos del sol
for (var i = 0; i < 12; i++) {
var angle = i * (Math.PI / 6); // 12 rayos, 30 grados entre ellos
drawPointedRay(200, 200, angle); // Rayos puntiagudos
drawCurvedRay(200, 200, angle); // Rayos curvados
}
</script>
5. Efectos de Color
El elemento <canvas> permite crear varios efectos de color utilizando métodos
de dibujo de JavaScript. Puedes aplicar colores sólidos, degradados y patrones a las figuras que
dibujes en el lienzo. Además, puedes usar el método globalAlpha para cambiar la
transparencia de los colores, lo que permite crear efectos visuales interesantes.
Ejemplo: Efectos de Color
Código del ejemplo
<canvas id="canvasEfectos" width="400" height="400" style="border:1px solid #000000;width: 100%; height: auto;"></canvas>
<script>
var c = document.getElementById("canvasEfectos");
var ctx = c.getContext("2d");
// Rellenar un rectángulo con color sólido
ctx.fillStyle = "blue";
ctx.fillRect(50, 50, 100, 100);
// Rellenar un rectángulo con degradado
var gradient = ctx.createLinearGradient(200, 50, 300, 150);
gradient.addColorStop(0, "red");
gradient.addColorStop(1, "yellow");
ctx.fillStyle = gradient;
ctx.fillRect(200, 50, 100, 100);
// Aplicar transparencia
ctx.globalAlpha = 0.5; // 50% de transparencia
ctx.fillStyle = "green";
ctx.fillRect(50, 200, 100, 100);
ctx.globalAlpha = 1.0; // Restablecer opacidad a 100%
</script>
5. Efectos de Color Mejorados
En este ejemplo, se muestran varios efectos de color en el lienzo, incluyendo un degradado radial, un patrón de líneas, y la posibilidad de aplicar transparencia a los colores.
Ejemplo: Efectos de Color Mejorados
Código del ejemplo
<canvas id="canvasEfectosMejorados" width="400" height="400" style="border:1px solid #000000;width: 100%; height: auto;"></canvas>
<script>
var c = document.getElementById("canvasEfectosMejorados");
var ctx = c.getContext("2d");
// Degradado radial
var radialGradient = ctx.createRadialGradient(200, 200, 20, 200, 200, 200);
radialGradient.addColorStop(0, "yellow");
radialGradient.addColorStop(1, "blue");
ctx.fillStyle = radialGradient;
ctx.fillRect(0, 0, 400, 400);
// Aplicar un patrón de líneas diagonales
ctx.strokeStyle = "black";
ctx.lineWidth = 2;
for (let i = 0; i <= 400; i += 20) {
ctx.beginPath();
ctx.moveTo(0, i);
ctx.lineTo(i, 400);
ctx.stroke();
}
// Aplicar transparencia
ctx.globalAlpha = 0.5; // 50% de transparencia
ctx.fillStyle = "red";
ctx.fillRect(50, 50, 100, 100);
ctx.globalAlpha = 1.0; // Restablecer opacidad a 100%
</script>
6. Conclusiones y Recursos Adicionales
Conclusiones
A lo largo de esta lección, hemos explorado el elemento <canvas> de HTML, su
configuración y cómo utilizar JavaScript para dibujar formas y aplicar efectos de color. El
<canvas> es una herramienta poderosa para crear gráficos dinámicos en la web
y es compatible con todos los navegadores modernos.
Desde dibujar líneas y círculos hasta crear efectos de color complejos, el lienzo ofrece una
amplia gama de posibilidades para los desarrolladores. Con la práctica, puedes utilizar
<canvas> para construir aplicaciones visuales interactivas.
Recursos Adicionales
- MDN Web Docs - Canvas API: Documentación oficial sobre el uso de Canvas en HTML.
- W3Schools - HTML5 Canvas: Tutorial interactivo sobre cómo utilizar el lienzo.
- HTML5 Canvas Tutorials: Una colección de tutoriales sobre cómo trabajar con Canvas.
- CSS-Tricks - Canvas 2D Drawing with JavaScript: Artículo que explora el dibujo en 2D utilizando JavaScript y Canvas.
7. Ejercicios Prácticos
Ejercicios Propuestos
- Dibuja una Casa: Crea un dibujo simple de una casa utilizando el <canvas>. Utiliza rectángulos y triángulos para representar las paredes y el techo.
- Rueda de Color: Crea un gráfico de "rueda de colores" usando círculos de diferentes colores dispuestos en un círculo.
- Animación Simple: Implementa una animación simple que muestre un círculo moviéndose de izquierda a derecha en el lienzo.
- Recrea un Logo: Intenta recrear un logo simple utilizando formas básicas y texto en el <canvas>.
- Juego de Click: Crea un juego simple donde los jugadores deben hacer clic en un objeto que se mueve aleatoriamente en el lienzo.
Intenta realizar estos ejercicios para practicar y mejorar tus habilidades en el uso de <canvas> y JavaScript. ¡Diviértete programando!
0 Comentarios
Si desea contactar comigo, lo puede hacer atravez deste formulario gracias