html5畫布中的「擦除」

我在html5畫布中有一個塗鴉應用程序，我試圖找出實現橡皮擦控制的最佳方法。第一個衝動就是讓橡皮擦畫背景顏色[白色]，但這是有問題的，因爲如果用戶將圖像或其他圖層移動到他們先前擦除的位置，他們會看到他們擦除的白色圖。html5畫布中的「擦除」

理想情況下，我想要擦除控制將像素更改爲黑色透明。我不能簡單地使用lineTo來做到這一點，顯然，它只是在它上面畫一條黑色的透明線條，並且保持原始的塗鴉不變。任何想法如何做到這一點？

謝謝。

2010-07-25 Matthew

http://www.w3schools.com/tags/canvas_globalcompositeoperation.asp – zloctb 2014-12-26 10:54:39

「黑色透明」是什麼意思？如果它是完全透明的，它是什麼顏色並不重要，是嗎？ – 2015-07-26 19:43:31

噓，不要小便的隱形粉色麒麟的崇拜者;） – BarbaraKwarc 2016-12-31 04:55:52

如果你想畫一個黑色透明的行程，你可能想：

context.globalCompositeOperation = "destination-out"; 
context.strokeStyle = "rgba(0,0,0,1)";

記得保存先前的globalCompositeOperation再後來恢復它或透明度在世界

最有價值的參考將無法正常工作！

2010-07-26 11:01:41 andrewmu

謝謝！那就是訣竅！：D – Matthew 2010-07-26 18:02:47

注意：正如@Tim暗示的那樣，您可能需要使用'rgba（0,0,0,1.0）'樣式來處理當前的Canvas 2D實現。 – andrewmu 2012-02-10 15:05:20

如果您的橡皮擦是矩形，請查看clearRect。按照規範，clearRect函數將使矩形中的像素透明黑色，如你所願。

如果您希望有其他橡皮擦形狀[即：circle？]，您必須操作像素數據。請注意，如果你想要一個像羽毛一樣的橡皮擦，這會變得地獄般。 http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#the-canvas-element

2010-07-25 11:01:36 Warty

請注意，firefox 3.6/4.0通過首先擦除整個背景來實現'複製'。 w3c文檔不清楚應該在這裏發生什麼。 Chrome（webkit？）將規範解釋爲「僅在實際繪製像素的位置」，例如筆畫（）的結果。

帶「rgba（255,255,255,1.0）」的目標輸出，將背景設置爲透明，其中幀緩衝區中的像素不透明。在Chrome和Firefox中都留下了透明背景。

在本地複製以下頁面，併爲藍色框和紅色圓圈使用各種顏色/不透明度，並且不要忘記將頁面的背景顏色設置爲非白色！和

你會發現瀏覽器有很大的不同。

2011-05-22 05:16:45 Tim

回答