html5画布中的“擦除”

我在html5画布中有一个涂鸦应用程序，我试图找出实现橡皮擦控制的最佳方法。第一个冲动就是让橡皮擦画背景颜色[白色]，但这是有问题的，因为如果用户将图像或其他图层移动到他们先前擦除的位置，他们会看到他们擦除的白色图。html5画布中的“擦除”

理想情况下，我想要擦除控制将像素更改为黑色透明。我不能简单地使用lineTo来做到这一点，显然，它只是在它上面画一条黑色的透明线条，并且保持原始的涂鸦不变。任何想法如何做到这一点？

谢谢。

2010-07-25 Matthew

http://www.w3schools.com/tags/canvas_globalcompositeoperation.asp – zloctb 2014-12-26 10:54:39

“黑色透明”是什么意思？如果它是完全透明的，它是什么颜色并不重要，是吗？ – 2015-07-26 19:43:31

嘘，不要小便的隐形粉色麒麟的崇拜者;） – BarbaraKwarc 2016-12-31 04:55:52

如果你想画一个黑色透明的行程，你可能想：

context.globalCompositeOperation = "destination-out"; 
context.strokeStyle = "rgba(0,0,0,1)";

记得保存先前的globalCompositeOperation再后来恢复它或透明度在世界

最有价值的参考将无法正常工作！

2010-07-26 11:01:41 andrewmu

谢谢！那就是诀窍！：D – Matthew 2010-07-26 18:02:47

注意：正如@Tim暗示的那样，您可能需要使用'rgba（0,0,0,1.0）'样式来处理当前的Canvas 2D实现。 – andrewmu 2012-02-10 15:05:20

如果您的橡皮擦是矩形，请查看clearRect。按照规范，clearRect函数将使矩形中的像素透明黑色，如你所愿。

如果您希望有其他橡皮擦形状[即：circle？]，您必须操作像素数据。请注意，如果你想要一个像羽毛一样的橡皮擦，这会变得地狱般。 http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#the-canvas-element

2010-07-25 11:01:36 Warty

请注意，firefox 3.6/4.0通过首先擦除整个背景来实现'复制'。 w3c文档不清楚应该在这里发生什么。 Chrome（webkit？）将规范解释为“仅在实际绘制像素的位置”，例如笔画（）的结果。

带“rgba（255,255,255,1.0）”的目标输出，将背景设置为透明，其中帧缓冲区中的像素不透明。在Chrome和Firefox中都留下了透明背景。

在本地复制以下页面，并为蓝色框和红色圆圈使用各种颜色/不透明度，并且不要忘记将页面的背景颜色设置为非白色！和

你会发现浏览器有很大的不同。

2011-05-22 05:16:45 Tim

回答