Html 绘制没有可见重叠的重叠半透明线

我正在开发一个使用HTML5画布的画师程序。我已经创建了一个绘图工具，用户可以在其中拖动和移动鼠标

我在

mousemove

事件上有一个监听器，可以画短线：

Painter.mainCanvas.beginPath();
Painter.mainCanvas.moveTo(Painter.lastX, Painter.lastY);
Painter.lastX = e.offsetX;
Painter.lastY = e.offsetY;
Painter.mainCanvas.lineTo(Painter.lastX, Painter.lastY);
Painter.mainCanvas.stroke();

在我将全局Alpha设置为<1之前，一切正常。使用此方法绘制时，结束点也是开始点。所以点被画了两次。因为我们有透明的颜色，这个点现在和其他的点有不同的颜色

我尝试了另一种方法，当mousemove启动时，它只在mouseup启动时使用

lineTo（）

和

stroke（）

这解决了双重绘制问题，但也引入了一个新问题：当用户打算绘制同一个点两次时，即不使用鼠标画十字线，该点将不会绘制两次。因为

lineTo（）

函数不会在没有笔划的情况下绘制两次点。

（重复您的问题）您最初的问题是，通过为每个段调用

beginPath（）

和

stroke（）

，您有许多重叠的半透明路径。新的“问题”是，通过创建所有

lineTo（）

命令作为同一路径的一部分，然后在末尾调用

stroke（）

一次，用户想要的任何自交路径都不会显示可见的重叠

下面是一个例子，说明了

• 在一条路径中有许多半透明的线，并且只抚摸一次（左上角），而不是
• 在不同的路径中有许多半透明的线，并且每一条线都有笔划（右下角）

我想说的是，您当前的解决方案（一条路径）是正确的方法，即使一条自交叉路径在不透明度方面不会加倍。这是您在Adobe Photoshop和Illustrator中绘制半透明路径时所看到的：鼠标按下时绘制的所有图形都是同一个非重叠透明对象的一部分。只有当用户释放并重新按下鼠标按钮时，您才能积累更多的透明度：

• 两次Photoshop画笔笔划，不透明度为50%：
  

• 两个Illustrator路径，不透明度为50%：

请特别注意，自相交笔划和路径在交叉期间不会显示两倍的不透明度，但会显示一条单独的新路径

---

我建议您坚持使用当前的解决方案，因为这些传统的、经过深思熟虑的应用程序就是这样运行的。我之所以这样说，是因为您希望您的软件包模仿用户的期望，也是因为如果这些软件包这样做，可能有一个很好的理由：您最初遇到的确切问题！：）

我想你是对的。那么问题就永远消失了，感谢未来的读者：下面是一个相关问题和答案的链接，该问题和答案涉及到透明绘画以及子路径如何与不希望的行为重叠@liuyanghejerry你的绘画web应用程序在任何地方都可用吗？我现在正在做完全相同的事情，我也遇到了同样的困境（相交线是否相加）。所以，在我看来，你的绘画应用程序可能有点类似。我的目前已经有900行了，而且运行得很好，但是我会发现看到你的应用程序也很有趣。如果你愿意，我也会在我的网站上线后发布一个链接。@joetje50太糟糕了，这个项目已经关闭多年了。要解决该问题，您不需要使用默认的

lineTo

或

笔划

。相反，要使线相交，需要逐点绘制每条线。看到这个：@liuyanghjerry我的方法是：我在

mousedown

上

getImageData

，然后简单地

putImageData（oldData）

，然后

stroke

。这样，您可以将整个画布重置为在进行笔划之前，然后重新绘制整个画布。不过，我正在考虑切换到一种更有效的方法：在画布上放置一个

，并将所有绘图指向该方法：使用

创建线条，并将画笔传递的坐标保存在数组中。然后，在

mouseup

上，只需移除

，使用

lineTo

s跟随画布上的相同坐标即可。