1

我正在尝试使用 Canvas 编写绘画应用程序。它的工作方式是按下鼠标时通过连接线。当线条不透明时,它运行良好,但是当我更改 alpha 参数时,我遇到了问题。

我尝试了两种选择:

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

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

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

我能做些什么?

谢谢

4

1 回答 1

6

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

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

当你得到 amouseup时,清除覆盖并将整个笔画绘制到主画布上。

这是一个活生生的例子:

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

于 2011-07-09T16:46:31.650 回答