删除上一个笔划（创建一个临时行） – Javascript / HTML5

我正在尝试制作一个简单的绘图应用程序，并且我希望在指定行起点后行可以预览行。 相应的javascript是这样的：

var Edges = new Array(); var Vertecies = new Array(); var Mouse = {x:0, y:0} function findPos(obj) { var curleft = 0, curtop = 0; if (obj.offsetParent) { do { curleft += obj.offsetLeft; curtop += obj.offsetTop; } while (obj = obj.offsetParent); return { x: curleft, y: curtop }; } return undefined; } function addEdge() { var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); var i=0; var Start = { x:0, y:0} var End = { x:0, y:0} var Line = (Start, End); var temp = new Array(); $("#myCanvas").mousemove(function(e){ console.log("mouse is movin!"); if(i==1) { var pos = findPos(this); console.log("I = 1 AHHHH") ctx.moveTo(Start.x, Start.y); ctx.lineTo(e.clientX-pos.x, e.clientY-pos.y); ctx.stroke(); } else{ } }) $("#myCanvas").click(function(event){ var pos = findPos(this); var x = event.pageX - pos.x; var y = event.pageY - pos.y; if (i==0) { Start = {x:x,y:y} i++; } else if(i==1) { End = {x:x,y:y} ctx.moveTo(Start.x , Start.y); ctx.lineTo(End.x , End.y); ctx.stroke(); Line = (Start, End); Edges.push(Line); i++; } while(i==2) { Start = {x:0, y:0}; End = {x:0, y:0}; i=0; } }); }; 

除此之外，我有一个名为myCanvas的相关canvas。

基本上它的作用是让线条从那个点移动到我的光标，直到我再次点击，然后它会停止，现在我只剩下这一排线。

如果我点击一次从点击的位置到我的光标，然后在第二次点击的位置放置一个永久线，我怎么能得到一个“临时”线。

Answer 1

你非常接近你的代码。 这里有一些填补空白的调整。

[编辑显示单一canvas解决方案]

为避免在用户拖动新线时绘制“一条线”，您必须在每次移动鼠标时清除canvas并仅绘制最新的拖动线。

清除canvas还将清除用户先前绘制的任何线条，因此您必须在每次拖动时重绘前一行。 为此，您必须存储有关每行的足够信息才能重绘。

对于每一行，您将需要起点和终点（x1 / y1和x2 / y2）。 您可以将这些起点和终点放在对象中，并将行对象存储在数组中：

 // an array to store previous lines var storedLines=[]; // to store a new line storedLines.push( { x1:10, y1:20, x2:50, y2:35 } ); 

此函数重绘所有先前绘制的线条

  function redrawStoredLines(){ ctx.clearRect(0,0,canvas.width,canvas.height); if(storedLines.length==0){ return; } // redraw each stored line for(var i=0;i 

现在显示用户的拖动线更容易这样：

 function handleMouseMove(e){ if(!isDown){ return; } redrawStoredLines(); var mouseX=parseInt(e.clientX-offsetX); var mouseY=parseInt(e.clientY-offsetY); // draw the current line ctx.beginPath(); ctx.moveTo(startX,startY); ctx.lineTo(mouseX,mouseY); ctx.stroke() } 

这是代码和小提琴： http ： //jsfiddle.net/m1erickson/NnZ7a/

           
Drag to draw lines
 
 Clear Canvas