Question

如何使用globalCompositeOperation删除内容？

http://canvaspaint.org/有一个橡皮擦，但这只是一条白线 - 只有当你的背景为白色时才好...

我知道你可以使用ctx.clearRect（）。但它并没有真正起作用，因为在拖动带有橡皮擦的鼠标（设置为8x8px）时，它只会产生未连接的8x8px正方形 - 而不是一条平滑的线条。

有没有办法将globalCompositeOperation用作橡皮擦？

类似的东西：

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

谢谢。

Answer 1

是的，您可以使用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/

Answer 2

ctx.globalCompositeOperation = "destination-out";

这应该可以解决问题。你也可以使用“xor”来消除善意。

Answer 3

我不这么认为。但只需将线条颜色更改为背景颜色即可。此外，如果您想要不同尺寸的橡皮擦增加线条尺寸。 ctx.lineWidth=//default 1.0 和ctx.strokeStyle=//default black我还建议您使用ctx.save()和ctx.restore()，这样您就不必担心重置行属性了。

HTML5 Canvas：globalCompositeOperation（橡皮擦）

3 个答案: