HTML5帆布：globalCompositeOperation（橡皮擦）

如何使用globalCompositeOperation擦除東西？HTML5帆布：globalCompositeOperation（橡皮擦）

http://canvaspaint.org/有一個橡皮擦，但是這只是一個白線 - 確定只有當你的背景是白色的...

我知道你可以使用ctx.clearRect（）。但它並沒有真正爲我工作，因爲在用橡皮擦（設置爲8x8px）拖動鼠標時，它只會產生不連接的8x8px正方形 - 並非真正的平滑線條。

有沒有辦法如何使用globalCompositeOperation作爲橡皮擦？

喜歡的東西：

ctx.globalCompositeOperation = "___something___"; 
ctx.beginPath(); 
ctx.lineTo(mouseX , mouseY); 
ctx.closePath();

謝謝。

來源

2010-08-10 jack moore

這可能會幫助你：http://stackoverflow.com/questions/3328906/erasing-in-html5-canvas – Castrohenge 2010-08-10 10:39:53

是的，你可以使用globalCompositeOperation as described here擦除。只需將其設置爲"copy"並使用例如strokeStyle = "rgba(0,0,0,0)"，這將清除中風中的畫布。

更新：感謝您指出這現在不工作@ will-huang。您應該如前所述將globalCompositeOperation設置爲destination-out，並將strokeStyle設置爲rgba(0,0,0,1)。（其實你可以有任何RGB值，你需要的alpha設置爲1.0，以充分抹掉行程的內容。）

這裏的擦除的例子：http://jsfiddle.net/FGcrq/1/

來源

2010-08-10 11:20:01 andrewmu

指定globalCompositeOperation爲「複製」，無法在IE9/IE10中正確運行。我被改爲「目的地輸出」並將strokeStyle改爲「rgba（0,0,0,1）」來解決這個問題。 – 2012-09-11 16:02:29

我不這麼認爲。但只要將線條顏色改爲任何背景顏色即可。此外，如果你想不同尺寸的橡皮擦增加線的大小。 ctx.lineWidth=//default 1.0 和ctx.strokeStyle=//default black我也建議使用ctx.save()和ctx.restore()，所以你不必擔心重置你的線條屬性。

來源

2010-08-10 04:12:01 qw3n

http://mugtug.com/sketchpad/有非常好的橡皮擦，但我無法弄清楚怎麼運行的。 – 2010-08-10 04:18:11

ctx.globalCompositeOperation = "destination-out";

這應該做的伎倆。你也可以使用「xor」來擦除善良。

來源

2011-02-21 07:24:39

我同意。 context.strokeStyle =「rgba（255,255,255,0.7）」; context.globalCompositeOperation =「destination-out」比「copy」更好，因爲您可以將橡皮擦調整爲不同的強度。 – Homan 2012-04-11 18:49:50

HTML5帆布：globalCompositeOperation（橡皮擦）

回答

相關問題