51 lines
1.8 KiB
HTML
51 lines
1.8 KiB
HTML
<canvas id="mainCanvas" width="800" height="600"></canvas>
|
|
<script>
|
|
const mainCanvas = document.getElementById("mainCanvas");
|
|
const mainCtx = mainCanvas.getContext("2d");
|
|
|
|
// Crear un canvas temporal para la forma base
|
|
function createBaseShapeCanvas(width, height, drawShapeCallback) {
|
|
const tempCanvas = document.createElement("canvas");
|
|
tempCanvas.width = width;
|
|
tempCanvas.height = height;
|
|
|
|
const tempCtx = tempCanvas.getContext("2d");
|
|
drawShapeCallback(tempCtx); // Dibujar la forma en el canvas temporal
|
|
|
|
return tempCanvas;
|
|
}
|
|
|
|
// Dibujar la forma base con diferentes configuraciones de sombra
|
|
function drawShapesWithShadows(baseCanvas) {
|
|
const shadows = [
|
|
{ shadowColor: "rgba(0, 0, 0, 0.5)", shadowBlur: 10, x: 50, y: 50 },
|
|
{ shadowColor: "rgba(255, 0, 0, 0.5)", shadowBlur: 20, x: 50, y: 50 },
|
|
{ shadowColor: "rgba(0, 0, 255, 0.7)", shadowBlur: 15, x: 50, y: 50 },
|
|
];
|
|
|
|
shadows.forEach(({ shadowColor, shadowBlur, x, y }, i) => {
|
|
mainCtx.save(); // Guardar estado actual del contexto principal
|
|
|
|
mainCtx.shadowColor = shadowColor;
|
|
mainCtx.shadowBlur = shadowBlur;
|
|
mainCtx.shadowOffsetX = i * 10 - 10; // Opcional: ajustar según el efecto deseado
|
|
mainCtx.shadowOffsetY = i * 10 - 10;
|
|
|
|
// Dibujar la forma base con la sombra configurada
|
|
mainCtx.drawImage(baseCanvas, x, y);
|
|
|
|
mainCtx.restore(); // Restaurar estado para evitar que las sombras se mezclen
|
|
});
|
|
}
|
|
|
|
// Crear la forma base
|
|
const baseShapeCanvas = createBaseShapeCanvas(100, 100, (ctx) => {
|
|
ctx.fillStyle = "green";
|
|
ctx.beginPath();
|
|
ctx.arc(50, 50, 50, 0, Math.PI * 2); // Un círculo
|
|
ctx.fill();
|
|
});
|
|
|
|
// Dibujar la forma base con diferentes sombras
|
|
drawShapesWithShadows(baseShapeCanvas);
|
|
</script> |