Primero, asegúrate de que tienes el elemento <canvas> listo en tu HTML:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Efectos en Canvas</title>
</head>
<body>
<canvas id="miCanvas" width="800" height="600" style="border:1px solid #000;"></canvas>
<script src="script.js"></script>
</body>
</html>
Vamos a escribir el código en script.js para aplicar gradientes y sombras a algunos elementos simples.
Los gradientes pueden ser lineales o radiales, y se utilizan para rellenar formas con un color que cambia gradualmente.
var canvas = document.getElementById('miCanvas');
var ctx = canvas.getContext('2d');
// Crear un gradiente lineal
var linearGradient = ctx.createLinearGradient(0, 0, 800, 0);
linearGradient.addColorStop(0, 'red');
linearGradient.addColorStop(1, 'blue');
// Aplicar el gradiente a un rectángulo
ctx.fillStyle = linearGradient;
ctx.fillRect(0, 0, 800, 200);
// Crear un gradiente radial
var radialGradient = ctx.createRadialGradient(400, 300, 50, 400, 300, 300);
radialGradient.addColorStop(0, 'yellow');
radialGradient.addColorStop(1, 'green');
// Aplicar el gradiente a un círculo
ctx.fillStyle = radialGradient;
ctx.arc(400, 300, 300, 0, Math.PI * 2);
ctx.fill();
Las sombras pueden agregar profundidad y realismo a tus gráficos. Configura las propiedades de sombra en el contexto antes de dibujar el elemento al que quieres aplicar la sombra.
// Configurar propiedades de sombra
ctx.shadowOffsetX = 10;
ctx.shadowOffsetY = 10;
ctx.shadowBlur = 20;
ctx.shadowColor = 'rgba(0, 0, 0, 0.5)';
// Dibujar un rectángulo con sombra
ctx.fillStyle = 'red';
ctx.fillRect(200, 400, 200, 100);
Puedes combinar gradientes y sombras para efectos visuales aún más complejos.
// Combinar gradiente y sombra en un círculo
ctx.fillStyle = radialGradient;
ctx.shadowOffsetX = 5;
ctx.shadowOffsetY = 5;
ctx.shadowBlur = 15;
ctx.shadowColor = 'rgba(0, 0, 255, 0.5)';
ctx.beginPath();
ctx.arc(400, 300, 100, 0, Math.PI * 2);
ctx.fill();
Empezaremos configurando nuestro entorno básico con un archivo HTML que incluye un elemento <canvas>.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Manipulación de Píxeles en Canvas</title>
</head>
<body>
<canvas id="miCanvas" width="800" height="600" style="border:1px solid #000;"></canvas>
<script src="script.js"></script>
</body>
</html>
Para demostrar la manipulación de píxeles, primero necesitamos cargar una imagen en el canvas, que luego manipularemos.
var canvas = document.getElementById('miCanvas');
var ctx = canvas.getContext('2d');
// Cargar una imagen
var img = new Image();
img.src = 'path/to/your/image.jpg'; // Asegúrate de tener permisos para usar la imagen
img.onload = function() {
ctx.drawImage(img, 0, 0);
};
Una vez que la imagen está cargada y dibujada, podemos acceder y manipular sus píxeles.
Utilizamos getImageData() para acceder a los píxeles de la imagen.
img.onload = function() {
ctx.drawImage(img, 0, 0);
var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
var data = imageData.data; // Es un array de valores de RGBA
};
Cada píxel en el array data está representado por cuatro elementos: rojo (R), verde (G), azul (B) y alfa (A), que determinan el color y la transparencia del píxel.
for (var i = 0; i < data.length; i += 4) {
data[i] = 255 - data[i]; // Invertir el rojo
data[i + 1] = 255 - data[i + 1]; // Invertir el verde
data[i + 2] = 255 - data[i + 2]; // Invertir el azul
// data[i + 3] es el canal alfa
}
Después de modificar los datos de píxeles, necesitas escribirlos de nuevo en el canvas
ctx.putImageData(imageData, 0, 0);
Además de simples inversiones de color, puedes aplicar otros efectos como ajuste de brillo, desenfoque, detección de bordes, etc., modificando los valores de los píxeles según algoritmos específicos.
