HTML Canvas RGBA抚摸

时间:2011-10-13 14:32:35

标签: javascript html canvas

我正在学习帆布,我的目标是伸出援手。在线的每个示例都说我应该在stroke()内拨打onmousemove。如果我的颜色strokeStyle具有100%的不透明度,则此操作符合预期。但是,如果我将rgba0.3 alpha值一起使用,则反复调用stroke()会重新着色整个路径,从而最终迫使该行变为不透明。

我尝试通过画线,停止路径和开始新路径来克服这个问题。这样做了一半 - 路径的重叠部分将是暗的两倍 - 如果你使用粗线宽,这是非常有问题的。

最后 - 我将stroke()移动到onmouseup - 除非用户在释放鼠标之前无法看到他正在绘制的内容,否则效果会很好。

我该如何解决这个问题?

1 个答案:

答案 0 :(得分:3)

解决此问题的一种方法是记住每个mousemove坐标并将它们放在一个列表中。在每个鼠标移动时,清除画布并将整个路径加上最新点重绘到画布上。

这会让它看起来很像你想要的。

你走了:

http://jsfiddle.net/sQLSp/

如果您希望画布在行之间保持不变,则需要在每个鼠标向上将其保存到内存中画布并在每一步重绘它。如果你想看看它的样子,请看这里:

http://jsfiddle.net/sQLSp/3/

编辑:修改了以Opera教程方式进行修改的示例:http://jsfiddle.net/2vAQE/