HTML画布RGBA抚摸

我正在学习画布，我的目标是画手。网上的每个例子都说我应该在我的onmousemove内拨打stroke()。如果我的颜色strokeStyle具有100％的不透明度，这可以正常工作。但是，如果我使用rgba和0.3 alpha值，则反复调用stroke()会重新着色整个路径，从而最终强制该行不透明。HTML画布RGBA抚摸

我试图通过画一条线，停止路径，并开始一个新的克服这一点。这工作的一半 - 路径的重叠部分将是黑暗的两倍 - 如果您使用粗线宽，这是非常有问题的。

最后 - 我将笔画（）移动到onmouseup - 这很有效，除非用户在释放鼠标之前无法看到他正在绘制的内容。

我该如何解决这个问题？

来源

2011-10-13 Mikhail

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

这将使它看起来很不错，就像你想要的。

在这里你去：

http://jsfiddle.net/sQLSp/

如果你想在画布上，你会希望将其保存到内存中的画布，在每只小鼠，并在每一步重绘其字里行间依然存在。如果你想看看是什么样子，在这里看到：

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

编辑：修改做歌剧院教程的方式举例：http://jsfiddle.net/2vAQE/

来源

2011-10-13 14:55:47

你说的是有道理的 - 是真的最好的办法？看起来像是浪费资源。我也发现这个例子：http://dev.opera.com/articles/view/html5-canvas-painting/它使用clearRect（）像你一样，但它并没有真正抹去一切......它令人困惑 – Mikhail

（我刚刚编辑了我的答案）。它可能不是最好的方式，它只是想到的第一件事。如果我想出更有效率的东西，我会让你知道，但画布的直接绘制表面性质表明，如果这是你想要的效果，这可能是你得到的唯一方法。不过，有可能是我没有想到的聪明:) –

哦，还有另一种好方法！ Opera教程正在使用一个临时的第二屏幕画布作为视觉反馈，然后在鼠标上将该反馈“提交”到正常画布。这也会起作用！ –

HTML画布RGBA抚摸

回答

相关问题