Javascript 如何仅删除画布上的一行，而不是所有图形？

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

---

我该怎么办？

也许你可以试试javascript绘图库。例如，在库中，您可以绘制更多面向对象的图形。有一个函数可以从画布中删除绘制的对象。

没有简单的方法可以做到这一点，因为在绘制任何内容后，像素的先前信息都会丢失。 这里有一个更好的答案：

在计算机图形学中，绘制某物时，要绘制到缓冲区。及 当您调用lineTo和stroke时，缓冲区将更新，并且所有 基础像素中的信息丢失（或部分丢失） 如果使用透明度，则会丢失），并且无法通过 撤消（除非有包含旧文件加载的实现） 绘画，但那对记忆来说真的很沉重）

因此，能够撤销笔划可能会节省大量CPU/GPU时间，但 谁会大大增加记忆

---

因此，使用clearRect的唯一方法似乎是正确的。

@danielfranca认为画在画布上的一条线变成了“画布像素海洋中未被记住的像素”

他还说得对，在绘制每一行时保存画布的快照图像，并恢复到其中一个保存的图像以“删除”一行是资源密集型的。（不要使用那种技巧！！）

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

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

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

• 在对象内部定义一行，如下所示：

  {x0:10，y0:15，x1:100，y1:75}

• 根据需要制作尽可能多的行，并将它们放入一个数组：

  var-lines=[]
  

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

• 收听

  mousemove

  和

  mousedown

  事件

• 在mousemove上，遍历行[]，并找到最靠近鼠标的行。下面是计算哪一行最接近给定[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;
          }
      }
  };
  

  正文{
  背景颜色：象牙色；
  }
  #帆布{
  边框：1px纯红；
  }

  
  距离鼠标最近的线以红色绘制
  单击以删除该线。
  

  这和Qt有什么关系吗？@Tay2510是的，qml也有画布，同样的答案也适用于那里。Qml是qt的一部分，因此其他人更容易搜索。请发布代码，演示如何绘制以及在什么画布上绘制。你在做什么一点也不清楚。html5画布可以修改，所以我不太理解你的问题。