我有一个关于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()函数不会在没有笔划之间绘制两次点.
解决方法
这是一个显示制作之间差异的示例
>单个路径中的许多半透明线条和一次(左上角),相对于
>不同路径中的许多半透明线条并且每个都在抚摸(右下角)
http://jsfiddle.net/jhyG5/2/
我会说你当前的解决方案(单一路径)是正确的方法,即使单个自交路径不会在不透明度上加倍.这是您在绘制半透明路径时在Adobe Photoshop和Illustrator中看到的内容：使用鼠标向下绘制的所有绘图都是相同的单个非重叠透明对象的一部分.只有当用户释放并重新按下鼠标按钮时,才会累积更多透明度：
>两个不透明度为50％的Photoshop画笔笔触：
>两个不透明度为50％的Illustrator路径：
特别要注意的是,自相交行程和路径在交叉过程中不会显示不透明度的两倍,而是一个单独的新路径.
我建议您坚持使用当前的解决方案,因为这就是这些传统的,经过深思熟虑的应用程序的行为方式.我之所以这么说都是因为你希望你的软件包能够模仿用户的期望,而且因为如果这些软件包像这样做,那么它可能是一个非常好的理由：你最初遇到的确切问题！
总结
以上是DEVMAX为你收集整理的html5 – 绘制重叠的半透明线条,没有可见的重叠全部内容。
如果觉得DEVMAX网站内容还不错，欢迎将DEVMAX网站推荐给好友。