javascript - HTML Canvas RGBA 描边

Question

我正在学习 Canvas ，我的目标是徒手绘画。每个在线示例都说我应该在我的 onmousemove 中调用 stroke()。如果我的颜色 strokeStyle 具有 100% 的不透明度，这将按预期工作。但是，如果我使用 rgba 和 0.3 alpha 值，然后一遍又一遍地调用 stroke() 重新着色整个路径，从而最终强制线条不透明。

我尝试通过画一条线、停止路径并开始一条新路径来克服这个问题。这起到了一半的作用——路径的重叠部分会加倍暗——如果你使用粗线宽，这是非常有问题的。

最后 -- 我将 stroke() 移动到 onmouseup -- 这很好用，除了用户在释放鼠标之前看不到他正在绘制的内容。

我该如何解决这个问题？

Answer 1

解决这个问题的一种方法是记住每一个 mousemove 坐标并将它们放在一个列表中。在每次移动鼠标时，您都会清除 Canvas 并将整个路径加上最新点重新绘制到 Canvas 上。

这会让它看起来像你想要的那样漂亮。

给你:

http://jsfiddle.net/sQLSp/

如果您希望 Canvas 在行之间保持不变，您需要在每次鼠标松开时将其保存到内存中的 Canvas 中，并在每一步重新绘制它。如果你想看看它是什么样子，请看这里:

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

编辑:为按照 Opera 教程的方式修改示例:http://jsfiddle.net/2vAQE/