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撫摸

回答

相關問題