Html html5画布中的“擦除”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3328906/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
"Erasing" in html5 canvas
提问by Matthew
I have a doodling application in html5 canvas, and I'm trying to figure out the best way to implement an eraser control. First impulse was just to have the eraser draw the background color [white], but this is problematic because if the user moves an image or another layer to where they've previously erased, they see the white drawing where they erased.
我在 html5 画布中有一个涂鸦应用程序，我正在尝试找出实现橡皮擦控件的最佳方法。第一个冲动只是让橡皮擦绘制背景颜色 [白色]，但这是有问题的，因为如果用户将图像或其他图层移动到他们之前擦除的位置，他们会看到他们擦除的白色绘图。
Ideally, I'd like to have the erase control change the pixels to black transparent. I can't simply use lineTo to do this because, obviously, it just draws a black transparent line over it, and that leaves the original doodle untouched. Any ideas on how to do this?
理想情况下，我希望擦除控件将像素更改为黑色透明。我不能简单地使用 lineTo 来执行此操作，因为很明显，它只是在其上绘制了一条黑色透明线，而不会触及原始涂鸦。关于如何做到这一点的任何想法？
Thanks.
谢谢。
回答by andrewmu
If you want to draw a black transparent stroke, you probably want:
如果要绘制黑色透明笔划，您可能需要：
context.globalCompositeOperation = "destination-out";
context.strokeStyle = "rgba(0,0,0,1)";
Remember to save the previous globalCompositeOperation and then restore it later or transparency won't work properly!
记得保存之前的 globalCompositeOperation，稍后再恢复，否则透明度将无法正常工作！
回答by Tim
Note that firefox 3.6/4.0 implement 'copy' by erasing the entire background first. The w3c docs aren't clear as to what should happen here. Chrome (webkit?) interprets the specs as 'only where pixels are actually drawn', for example the result of a stroke().
请注意，firefox 3.6/4.0 通过首先擦除整个背景来实现“复制”。w3c 文档不清楚这里应该发生什么。Chrome（webkit？）将规范解释为“仅在实际绘制像素的地方”，例如笔划（）的结果。
destination-out with "rgba(255,255,255,1.0)", sets background to transparent where pixels in the framebuffer are not transparent. leaving transparent background in both chrome and firefox.
目标输出与“rgba(255,255,255,1.0)”，将背景设置为透明，其中帧缓冲区中的像素不透明。在 chrome 和 firefox 中都留下透明背景。
copy the following page locally, and play with various colors/opacities for the blue box and red circle, and don't forget to make the background color of the page non-white! and
将下面的页面复制到本地，蓝框和红圈用各种颜色/不透明度玩，不要忘记把页面的背景色设为非白色！和
https://developer.mozilla.org/samples/canvas-tutorial/6_1_canvas_composite.html
https://developer.mozilla.org/samples/canvas-tutorial/6_1_canvas_composite.html
You'll find browsers are wildly different.
你会发现浏览器大不相同。
回答by Warty
Look into clearRect if your eraser is a rectangle. The clearRect function, as per the specification, will make pixels in the rectangle transparent black, as you want.
如果您的橡皮擦是矩形，请查看 clearRect。根据规范， clearRect 函数将使矩形中的像素根据需要变为透明黑色。
If you wish to have other eraser shapes [ie: circle?] you must manipulate pixel data. Note that if you want a feathering-like eraser, this becomes hellish.
如果您希望有其他橡皮擦形状[即：圆形？]，您必须操作像素数据。请注意，如果您想要一个像羽毛一样的橡皮擦，这将变得非常糟糕。
Most helpful reference in the world: http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#the-canvas-element
世界上最有用的参考：http: //www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#the-canvas-element
