HTML5畫布 - 使用繪畫應用程序的不透明問題

Question

我想使用畫布來編寫繪畫應用程序。 它的工作方式是在按下鼠標時通過連接線。 當線條不透明時效果很好，但是當我更改alpha參數時出現問題。

我嘗試了兩種選擇：

一個。路徑從鼠標首次關閉時開始，到鼠標再次打開時結束： 鼠標的每一次移動都會調用stroke（）函數。因爲線是透明的，整個路徑的開始將變得不透明，並且結束將不會，因爲stroke（）被調用很多次，並且它一次又一次地遍歷整個路徑。

灣該路徑開始和結束鼠標的每一步移動： 該行在整個路徑中都是透明的，但每個路徑和路徑之間的匹配點不太透明（因爲它們由兩行組成）。所以整個路徑並不穩固。

我得到一個好結果的唯一方法是當我只在鼠標再次打開時調用stroke（）。那麼它會很好地撫摸整個路徑，但在繪製它時我什麼也看不到。

我該怎麼辦？

感謝

Answer 1

我認爲最好的方法是創建一個定位（使用絕對定位）第二覆蓋畫布在主畫布。

在鼠標拖動期間，對於每個mousemove事件，請使用clearRect（）清除疊加畫布，然後繪製整個正在進行的中風。

當您收到mouseup時，請清除疊加層並將整個描邊繪製到主要畫布。

這裏是一個活生生的例子：

http://jsfiddle.net/rnNFB/1/