0
146
Vistas¿Cómo crear una sombra común para múltiples trazos en un solo lienzo?
Estoy tratando de dibujar varios trazos en un lienzo y me gustaría que tuvieran una sombra común. Actualmente, las sombras se proyectan entre sí, lo que no es lo que quiero.
Resultado ideal
lo que he probado
·
Juan Pablo Isaza
2 Respuestas
Responde la pregunta0
Si necesita que cada trazo sea independiente (es decir, que cada uno tenga su propio estilo de trazo o ancho de línea), deberá usar un segundo lienzo separado:
- en este lienzo despegado dibujas todos tus trazos sin sombra
-
drawImageese lienzo separado en el visible con la sombra:
const canvas = document.querySelector("canvas"); const ctx = canvas.getContext("2d"); const detached = canvas.cloneNode(); const detachedCtx = detached.getContext("2d"); const colors = ["green", "blue", "yellow", "orange", "aqua"]; detachedCtx.lineWidth = 5; for (let color of colors) { // draw on the detached canvas detachedCtx.beginPath(); for (let i = 0; i<5; i++) { detachedCtx.lineTo(Math.random() * canvas.width, Math.random() * canvas.height); } detachedCtx.strokeStyle = color; detachedCtx.lineWidth = Math.random() * 8 + 2; detachedCtx.stroke(); } // now draw all this with shadows on the visible canvas ctx.shadowOffsetX = 3; ctx.shadowOffsetY = 3; ctx.shadowBlur = 3; ctx.shadowColor = "red"; ctx.drawImage(detached, 0, 0); <canvas></canvas> Pero para producir la imagen que tiene, todo lo que necesita es llamar a stroke() solo una vez después de que compuso su ruta completa:
const canvas = document.querySelector("canvas"); const ctx = canvas.getContext("2d"); ctx.fillStyle = "#0F0"; ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.lineWidth = 5; ctx.shadowOffsetX = -3; ctx.shadowOffsetY = -3; ctx.shadowBlur = 3; ctx.shadowColor = "red"; ctx.moveTo(10, 50); ctx.lineTo(90, 50); ctx.moveTo(50, 10); ctx.lineTo(50, 90); ctx.stroke(); // stroke only once, with the full path being traced <canvas width=100 height=100></canvas>
·
Juan Pablo Isaza
Denunciar
0
Puede usar Path2D y agregar todos sus segmentos a una ruta, luego hacer el trazo a esa ruta.
Aquí está su jsfiddle usando ctx.filter con mi recomendación.
const segments = [ [{x: 10, y: 50}, {x: 50, y: 50}], [{x: 50, y: 10}, {x: 50, y: 50}], [{x: 90, y: 50}, {x: 50, y: 50}], [{x: 50, y: 90}, {x: 50, y: 50}], ] let path = new Path2D() segments.forEach(segment => { path.moveTo(segment[0].x, segment[0].y) path.lineTo(segment[1].x, segment[1].y) }) const ctx = document.getElementById('my-canvas').getContext('2d') ctx.lineWidth = 5 ctx.filter = 'drop-shadow(-3px -3px 3px #f00)'; ctx.strokeStyle = 'black' ctx.stroke(path) <canvas width="100" height="100" id="my-canvas" style="background: #00ff00"/> Puedes leer más sobre Path2D aquí:
https://developer.mozilla.org/en-US/docs/Web/API/Path2D/Path2D
·
Juan Pablo Isaza
Denunciar
Responde la pregunta