在HTML5canvas中“擦除”

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

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

谢谢。

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

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

请记住保存以前的globalCompositeOperation，然后再恢复它，否则透明度将无法正常工作！

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

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

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

你会发现浏览器是非常不同的。

如果你的橡皮擦是一个矩形，看看clearRect。 clearRect函数，根据规范，将使矩形中的像素透明黑色，如你所愿。

如果你想有其他的橡皮擦形状[即：圆？]，你必须操纵像素数据。请注意，如果你想要一个像羽毛般的橡皮擦，这将变得地狱般。

世界上最有用的参考资料： http : //www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#the-canvas-element