javascript - 画布擦除不起作用

Question

我正在使用画布开发绘图应用程序。我想实现一个擦除功能，但不是一个简单的擦除，它是一支简单的白笔，一个真正的橡胶。

事实上，我在应用程序上添加了一个透明画布，我想，当我绘制时，我可以擦除我绘制的内容，即将 opacity 设置为 0 ！

我已经在 Google 和 stackoverflow 上搜索过，我发现：

代码 : JavaScript - Sélectionner

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

但它不起作用......同样，我尝试了MDNglobalCompositeOperation上显示的不同模式，但没有区别。请帮忙。

Answer 1

它不起作用，因为您在要擦除的内容上画了一条透明线……所以它什么也不做。

当您有白色背景时，它很容易擦除，您只需绘制白色即可。但这不是你想要的。

这里的技巧是使用 clearRect 删除画布上的内容，而不是在其他形状上绘制。

context.clearRect(cursorX, cursorY, brushWidth, brushHeight);

它会显示为小方块，但我看不到另一种方法，除了像素操作。