0
388
VistasEliminar una línea de lienzo HTML
En la demostración en vivo aquí , tengo una cuadrícula aquí y dibujo una línea ctx en la cuadrícula. ¿Puedo saber cómo eliminar la línea ctx usando un botón?
En mi código JS,
var c = document.getElementById("canvas"); var ctx = c.getContext("2d"); ctx.beginPath(); ctx.moveTo(0, 0); ctx.lineTo(300, 150); ctx.stroke(); ctx.beginPath(); ctx.moveTo(10, 10); ctx.lineTo(350, 110); ctx.stroke();1 Respuestas
Responde la pregunta0
No puede eliminar una línea (o cualquier otra forma) del lienzo, pero puede volver a dibujar todo. Luego debe poder mantener el "estado" del lienzo. En este ejemplo, tengo una matriz de objetos que representan líneas individuales. Cuando se llama a la función draw() , las líneas también se dibujan en el lienzo.
Hay dos funciones para ilustrar cómo puede cambiar el estado eliminando líneas o agregando nuevas líneas. Entonces, dependiendo de cómo el usuario deba interactuar con el lienzo, agregaría y eliminaría estas líneas/objetos de la matriz.
Actualizar
El estilo de la línea se puede cambiar usando strokeStyle y lineWidth . Estos se aplican en stroke() . Para cada trazo, debe establecer una nueva ruta con beginPath() . Al principio y al final de draw() agregué save() y restore() . save() guarda el estado actual (una especie de estado inicial, aquí) y restore() vuelve a ese estado.
var lines = [{ x1: 0, y1: 0, x2: 300, y2: 110 }, { x1: 10, y1: 10, x2: 350, y2: 110 } ]; var canvas, context; canvas = document.getElementById('canvas'); if (canvas.getContext) { context = canvas.getContext('2d'); draw(); // intitial draw } function draw() { context.clearRect(0, 0, canvas.width, canvas.height); context.save(); context.strokeStyle = 'grey'; context.beginPath(); for (var x = 0.5; x < 500; x += 50) { context.moveTo(x, 0); context.lineTo(x, 500); } for (var y = 0.5; y < 500; y += 50) { context.moveTo(0, y); context.lineTo(500, y); } context.stroke(); context.strokeStyle = 'red'; context.lineWidth = 3; context.beginPath(); // draw alle the lines lines.forEach(line => { context.moveTo(line.x1, line.y1); context.lineTo(line.x2, line.y2); }); context.stroke(); context.restore(); } function removeline(){ lines.shift(); draw(); // re-draw the canvas } function addline(){ let line = { x1: Math.random()*500, y1: Math.random()*500, x2: Math.random()*500, y2: Math.random()*500 }; lines.push(line); draw(); // re-draw the canvas } <div> <button onclick="removeline()">Remove line</button> <button onclick="addline()">Add line</button> </div> <canvas id='canvas' width="500" height="500"></canvas>