HTML5 画布 - 绘画应用程序的不透明度问题

Question

我正在尝试使用 Canvas 编写绘画应用程序。 它的工作方式是按下鼠标时通过连接线。 当线条不透明时效果很好，但是当我更改 alpha 参数时出现问题。

我尝试了两种选择：

一个。路径从鼠标第一次向下时开始，到鼠标再次向上时结束： 鼠标的每一次移动都会调用 stroke() 函数。因为线条是透明的，所以整个路径的开头会变得不透明，而结尾不会，因为 stroke() 被多次调用，它一次又一次地绘制整个路径。

b.路径开始和结束鼠标的每一次移动： 这条线在整个过程中都是透明的，但是每条路径和路径之间的匹配点不太透明（因为它们是由两条线组成的）。所以整个路径并不稳固。

获得好结果的唯一方法是仅在鼠标再次抬起时才调用stroke()。然后它很好地抚摸了整个路径，但在实际绘制时我什么也看不到。

我能做什么？

谢谢

Answer 1

我认为您最好的选择是创建第二个覆盖画布，该画布定位（使用绝对定位）在您的主画布之上。

在鼠标拖动期间，对于每个 mousemove 事件，使用 clearRect() 清除覆盖画布，然后绘制整个正在进行的笔划。

当您收到mouseup 时，清除叠加层并将整个笔画绘制到主画布上。

这是一个活生生的例子：

http://jsfiddle.net/rnNFB/1/