在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中都留下了透明的背景。

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

https://developer.mozilla.org/samples/canvas-tutorial/6_1_canvas_composite.html

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

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

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

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