html - html5 Canvas 中的 "Erasing"

Question

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

理想情况下，我想让删除控件将像素更改为黑色透明。我不能简单地使用 lineTo 来执行此操作，因为很明显，它只是在其上绘制了一条黑色透明线，而原始涂鸦没有受到影响。关于如何执行此操作的任何想法？

谢谢。

Answer 1

如果你想画一个黑色透明的描边，你可能想要:

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

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