HTML画布RGBA描边

HTML Canvas RGBA stroking

本文关键字：描边 RGBA 画布 HTML 更新时间：2023-09-26

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

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

最后，我将stroke()移动到onmouseup，这非常有效，除了用户在释放鼠标之前无法看到他正在绘制的内容。

我该如何解决这个问题?

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

这将使它看起来像你想要的那样漂亮。

给你:

http://jsfiddle.net/sQLSp/

如果您希望画布在行与行之间持久存在，则需要在每次鼠标向上移动时将其保存到内存画布中，并在每一步重新绘制它。如果你想看看它是什么样子的，请看这里:

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

编辑:以歌剧教程的方式修改的示例:http://jsfiddle.net/2vAQE/