0
131
ViewsJavascript getImageData putImageData no funciona con la adquisición de una sola línea
La idea es volver a dibujar el fondo cuando se mueve una línea a lo largo de un lienzo: 
mi código de trabajo es el siguiente:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <p id="xmouse">xmouse</p> <canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;"> Your browser does not support the HTML5 canvas tag.</canvas> <script> document.addEventListener('mousemove', readXMouse); //Mouse move inside the graph var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); var mouseXold =0; var imgData; //Draw a diagonal line ctx.beginPath(); ctx.strokeStyle = "black"; ctx.lineWidth = 25; ctx.moveTo(0, 0); ctx.lineTo(300, 140); ctx.stroke(); ctx.closePath(); function readXMouse(e){ var mouseXdet = `${e.clientX}`-10 if(mouseXdet>300){return} document.getElementById("xmouse").innerHTML=mouseXdet; if(imgData != undefined){ctx.putImageData(imgData,mouseXold-1,0)}//Restore the background imgData = ctx.getImageData(mouseXdet-1, 0,1 ,150) //memorize the background //Draw vertical line ctx.beginPath(); ctx.strokeStyle = "orange"; ctx.lineWidth = 1; ctx.moveTo(mouseXdet, 0); ctx.lineTo(mouseXdet, 150); ctx.stroke(); ctx.closePath(); mouseXold=mouseXdet //Stores old x value } </script> </body> </html> Mi pregunta es: ¿por qué no puedo almacenar solo la línea pero necesito almacenar y restaurar desde mouseXdet-1 a mouseXdet-1+2 para que la imagen no se arruine como en la segunda imagen? 
·
Juan Pablo Isaza
Answer question