0
221
VisualizaçõesCómo eliminar el trazo superpuesto
Estoy tratando de dibujar una serie de círculos que se supone que deben dividir una serie de líneas. Todo se ve bien si los círculos están lejos unos de otros, pero si los círculos se superponen, aparece un trazo debajo.
¿Algún consejo sobre cómo eliminar este trazo cuando los círculos se superponen? Esto es de lo que estoy hablando:
Aquí está mi código:
let canvas = document.getElementById('myCanvas') let ctx = canvas.getContext('2d'); document.body.style.backgroundColor = "#121212"; ctx.lineWidth = 1; ctx.fillStyle = '#121212'; ctx.strokeStyle = '#9f9999'; ctx.lineCap = "round"; let width = canvas.width; let height = canvas.height; let lines = new Array(height); let singleLine = new Array(width); let step = 30; for (let y = step; y < height; y += step) { ctx.beginPath(); for (let x = step; x < width; x += step) { if (Math.random() < 0.85) { ctx.lineTo(x, y); } else { drawCircle(y, x); } } ctx.stroke(); ctx.fill(); } function drawCircle(x, y) { ctx.arc(y, x, 20, Math.PI, 0, false); } <canvas id="myCanvas"></canvas>1 Respostas
Responde à pergunta0
Esto sucede porque su forma de cubrir la intersección a través de fill() cubrirá solo la mitad del trazo en el borde del área de relleno. Esto está bien para la parte redondeada, pero la línea inferior ( lineTo ) entre ambos arcos aún tendrá visible su mitad inferior:
const ctx = document.querySelector("canvas").getContext("2d"); ctx.fillStyle = "rgba(255, 0, 0, 0.25)"; ctx.lineTo(30, 50); ctx.lineTo(60, 50); ctx.arc(90, 50, 20, Math.PI, 0); ctx.arc(120, 50, 20, Math.PI, 0); ctx.lineTo(150, 50); ctx.lineTo(180, 50); ctx.stroke(); ctx.fill(); // a zoomed in version in case it's not visible enough const zoom = document.querySelectorAll("canvas")[1].getContext("2d"); zoom.scale(4, 4); zoom.imageSmoothingEnabled = false; zoom.drawImage(ctx.canvas, -70, -20); canvas{ vertical-align: middle } <canvas width=200></canvas>zoomed in: <canvas></canvas>Mi idea original era dibujar rectángulos sobre cada sección de protuberancia superpuesta, pero en los comentarios se sugirió un mejor enfoque: extienda el relleno ligeramente hacia abajo después de acariciar, luego rellene el camino con el color de fondo. Esto asegura que el trazo inferior de las líneas superpuestas también se rellene.
const canvas = document.querySelector("canvas") const ctx = canvas.getContext("2d"); document.body.style.backgroundColor = "#121212"; ctx.lineWidth = 1; ctx.fillStyle = "#121212"; ctx.strokeStyle = "#9f9999"; ctx.lineCap = "round"; const {width, height} = canvas; const step = 30; for (let y = step; y < height; y += step) { ctx.beginPath(); for (let x = step; x < width; x += step) { if (Math.random() < 0.55) { ctx.lineTo(x, y); } else { ctx.arc(x, y, 20, Math.PI, 0, false); } } ctx.stroke(); ctx.lineTo(width - step, y + 1); ctx.lineTo(step, y + 1); //ctx.fillStyle = "red"; // to debug ctx.fill(); } <canvas></canvas>