我正在使用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中看到的内容：使用鼠标向下绘制的所有绘图都是相同的单个非重叠透明对象的一部分.只有当用户释放并重新按下鼠标按钮时,才会累积更多透明度：
>两个不透明度为50％的Photoshop画笔笔触：
>两个不透明度为50％的Illustrator路径：
特别要注意的是,自相交行程和路径在交叉过程中不会显示不透明度的两倍,而是一个单独的新路径.
我建议您坚持使用当前的解决方案,因为这就是这些传统的,经过深思熟虑的应用程序的行为方式.我之所以这么说都是因为你希望你的软件包能够模仿用户的期望,而且因为如果这些软件包像这样做,那么它可能是一个非常好的理由：你最初遇到的确切问题！ 原文链接：https://www.f2er.com/html5/168829.html
