javascript - HTML5 Canvas : globalCompositeOperation (eraser)

Question

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

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

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

有没有办法将 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)" 这将清除笔划中的 Canvas 。

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

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