“擦除"在 html5 画布中 [英] "Erasing" in html5 canvas

问题描述

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

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.

理想情况下，我希望擦除控件将像素更改为黑色透明.我不能简单地使用 lineTo 来执行此操作，因为很明显，它只是在其上绘制了一条黑色透明线，而不会触及原始涂鸦.关于如何做到这一点的任何想法?

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?

谢谢.

推荐答案

如果你想绘制一个黑色的透明笔划，你可能需要:

If you want to draw a black transparent stroke, you probably want:

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

记得保存之前的globalCompositeOperation，稍后再恢复，否则透明度将无法正常工作！

Remember to save the previous globalCompositeOperation and then restore it later or transparency won't work properly!

这篇关于“擦除"在 html5 画布中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！