如何从画布中仅删除一行，而不是所有绘图？

Question

我找到的解决方案是清除整个画布，但我只想删除画布上的一行而不是所有绘图。

我该怎么办？

Answer 1

@danielfranca 是正确的，画在画布上的一条线变成了“画布像素海洋中未被记住的像素”。

他也是正确的，在绘制每条线时保存画布的快照图像并恢复到那些保存的图像之一以“删除”一条线是资源密集型的。（不要使用那种技术！！）

但是，有一种有效的方法可以删除画布上先前绘制的线条！

是的，它确实清除了画布并重新绘制了线条，但它非常快速和高效......我保证！

这是如何做到这一点的概述：

• 在对象内定义一条线，如下所示： { x0:10, y0:15, x1:100, y1:75 }

• 根据需要制作尽可能多的这些行并将它们推入一个数组： var lines=[];

• 使用 lines[] 数组中的线条定义将线条绘制到画布上。

• 侦听mousemove和mousedown事件。

• 在 mousemove 上，遍历 lines[] 并找到最接近鼠标的行。这是计算哪条线最接近给定 [mx,my] 的算法片段：

  // Find the index of the line closest to mx,my
  function setClosestLine(mx,my) {
      //
      closestLineIndex=-1;
      var minDistanceSquared=100000000;
      //
      // examine each line & 
      // determine which line is closest to the mouse (mx,my)
      for(var i=0;i<lines.length;i++){
          var line=lines[i];
          var dx=line.x1-line.x0;
          var dy=line.y1-line.y0;
          var t=((mx-line.x0)*line.dx+(my-line.y0)*line.dy)/line.dx2dy2;
          var x=lerp(line.x0, line.x1, t);
          var y=lerp(line.y0, line.y1, t);
          var dx1=mx-x;
          var dy1=my-y;
          var distSquared=dx1*dx1+dy1*dy1;
          if(distSquared<minDistanceSquared){
              minDistanceSquared=distSquared;
              closestLineIndex=i;
              closestX=x;
              closestY=y;
          }
      }
  };
  

• 在鼠标按下时，用于lines.splice(targetIndex,1)从lines[] 数组中删除最近线的定义。然后清除画布并重新绘制剩余的线条。

这是带注释的代码和演示：

// Find the index of the line closest to mx,my
function setClosestLine(mx,my) {
    //
    closestLineIndex=-1;
    var minDistanceSquared=100000000;
    //
    // examine each line & 
    // determine which line is closest to the mouse (mx,my)
    for(var i=0;i<lines.length;i++){
        var line=lines[i];
        var dx=line.x1-line.x0;
        var dy=line.y1-line.y0;
        var t=((mx-line.x0)*line.dx+(my-line.y0)*line.dy)/line.dx2dy2;
        var x=lerp(line.x0, line.x1, t);
        var y=lerp(line.y0, line.y1, t);
        var dx1=mx-x;
        var dy1=my-y;
        var distSquared=dx1*dx1+dy1*dy1;
        if(distSquared<minDistanceSquared){
            minDistanceSquared=distSquared;
            closestLineIndex=i;
            closestX=x;
            closestY=y;
        }
    }
};

// canvas related variables
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;
function reOffset(){
    var BB=canvas.getBoundingClientRect();
    offsetX=BB.left;
    offsetY=BB.top;        
}
var offsetX,offsetY;
reOffset();
window.onscroll=function(e){ reOffset(); }


ctx.lineWidth=2;

// linear interpolation -- needed in setClosestLine()
var lerp=function(a,b,x){ return(a+x*(b-a)); };

// vars to track which line is closest to the mouse
var closestLineIndex=-1;
var closestX,closestY;

// make some random lines and save them in lines[]
var n=5;
var lines=[];
var randomX=function(){return(Math.random()*cw*.67);}
var randomY=function(){return(Math.random()*ch*.67);}
var lastX=randomX();
var lastY=randomY();
for(var i=0;i<n;i++){
    var x=Math.random()*cw*.67;
    var y=Math.random()*ch*.67;
    var dx=x-lastX;
    var dy=y-lastY;
    var line={
        x0:lastX,
        y0:lastY,
        x1:x,
        y1:y,
        weight:Math.round(Math.random()*20),
        // precalc often used values
        dx:dx,
        dy:dy,
        dx2dy2:dx*dx+dy*dy,
    };
    lines.push(line);
    lastX=x;
    lastY=y;
}


redraw();

$("#canvas").mousedown(function(e){handleMouseDown(e);});
$("#canvas").mousemove(function(e){handleMouseMove(e);});


//////////////////////////////
// functions

// Find the index of the line closest to mx,my
function setClosestLine(mx,my) {
    //
    closestLineIndex=-1;
    var minDistanceSquared=100000000;
    //
    // examine each line & 
    // determine which line is closest to the mouse (mx,my)
    for(var i=0;i<lines.length;i++){
        var line=lines[i];
        var dx=line.x1-line.x0;
        var dy=line.y1-line.y0;
        var t=((mx-line.x0)*line.dx+(my-line.y0)*line.dy)/line.dx2dy2;
        var x=lerp(line.x0, line.x1, t);
        var y=lerp(line.y0, line.y1, t);
        var dx1=mx-x;
        var dy1=my-y;
        var distSquared=dx1*dx1+dy1*dy1;
        if(distSquared<minDistanceSquared){
            minDistanceSquared=distSquared;
            closestLineIndex=i;
            closestX=x;
            closestY=y;
        }
    }
};

// clear & redraw all lines
function redraw(){
    
    // clear the canvas
    ctx.clearRect(0,0,cw,ch);
    
    // draw all lines
    ctx.strokeStyle='black';
    for(var i=0;i<lines.length;i++){   
        var line=lines[i];
        ctx.beginPath();
        ctx.moveTo(line.x0,line.y0);
        ctx.lineTo(line.x1,line.y1);
        ctx.stroke();
    }

    // draw the line closest to the mouse in red
    if(closestLineIndex<0){return;}
    var line=lines[closestLineIndex];
    ctx.strokeStyle='red';
    ctx.beginPath();
    ctx.moveTo(line.x0,line.y0);
    ctx.lineTo(line.x1,line.y1);
    ctx.stroke();
}

// On mousemove, find line closest to mouse
function handleMouseMove(e){
  e.preventDefault();
  e.stopPropagation();

  mouseX=parseInt(e.clientX-offsetX);
  mouseY=parseInt(e.clientY-offsetY);

  setClosestLine(mouseX,mouseY);

  redraw();

}

// On mousedown, remove line that was closest to mouse
function handleMouseDown(e){
    e.preventDefault();
    e.stopPropagation();

    if(closestLineIndex>=0){
        lines.splice(closestLineIndex,1);
        redraw();
    }
}

body {
  background-color: ivory;
}
#canvas {
  border: 1px solid red;
}