HTML5 Canvas:globalCompositeOperation(橡皮擦)

Question

如何使用globalCompositeOperation删除某些内容？

http://canvaspaint.org/有一个橡皮擦,但这只是一条白线 - 只有你的背景是白色的......

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

有没有办法如何使用globalCompositeOperation作为橡皮擦？

就像是:

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

谢谢.

Answer 1

是的,您可以使用globalCompositeOperation擦除,如此处所述.只需将其设置为"copy"并使用例如strokeStyle = "rgba(0,0,0,0)",这将清除笔画中的画布.

更新:感谢指出现在这不起作用@ will-huang.您应该如上所述将destination-outglobalCompositeOperation设置为并将strokeStyle设置为rgba(0,0,0,1).(实际上你可以有任何RGB值,只需要将alpha设置为1.0就可以完全擦除笔画的内容.)

这是一个擦除的例子:http://jsfiddle.net/FGcrq/1/