html5 橡皮擦效果,javascript – HTML5 Canvas：globalCompositeOperation(橡皮擦)

最新推荐文章于 2022-08-25 17:00:02 发布

五条人

最新推荐文章于 2022-08-25 17:00:02 发布

阅读量399

点赞数

文章标签： html5 橡皮擦效果

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

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

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

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

就像是：

ctx.globalCompositeOperation = "___something___";

ctx.beginPath();

ctx.lineTo(mouseX , mouseY);

ctx.closePath();

谢谢.

解决方法:

是的,您可以使用globalCompositeOperation as described here进行擦除.只需将其设置为“复制”并使用例如strokeStyle =“rgba(0,0,0,0)”,这将清除笔画中的画布.

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

标签：javascript,canvas

来源： https://codeday.me/bug/20190726/1545620.html