我正在尝试使用 Canvas 编写绘图应用程序。 它的工作方式是在按下鼠标时通过连接线。 当线条不透明时，它运行良好，但当我更改 alpha 参数时，我遇到了问题。
我尝试了两种选择:
一个。路径从鼠标第一次按下时开始，到鼠标再次抬起时结束: 鼠标的每一次移动都会调用 stroke() 函数。因为线条是透明的，所以整个路径的开头会变得不透明而结尾不会，因为 stroke() 被调用了很多次，它一次又一次地绘制整个路径。
路径开始和结束鼠标的每一次移动: 这条线在整个过程中都是透明的，但是每条路径和路径之间的匹配点不太透明(因为它们是由两条线组成的)。所以整个路径并不稳固。
我获得好结果的唯一方法是仅当鼠标再次抬起时才调用 stroke() 。然后它很好地抚摸了整个路径，但在实际绘制时我什么也看不到。
我能做什么？
谢谢
最佳答案
我认为您最好的选择是创建第二个覆盖 Canvas ，将其定位(使用绝对定位)在您的主 Canvas 上。
在鼠标拖动期间，对于每个 mousemove 事件，使用 clearRect() 清除覆盖 Canvas ，然后绘制整个正在进行的笔画。
当您获得 mouseup 时，清除覆盖并将整个笔画绘制到主 Canvas 。
这是一个活生生的例子:
关于HTML5 Canvas - 绘画应用程序的不透明度问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6634536/