Canvas元素使用JavaScript“擦掉”效果

Question

我有一个画布<canvas></canvas>，显示一个不洁窗口的图形。我需要能够用光标“清理”窗口，在其后面显示另一个图像。就像这个网站使用他们的画笔一样：http://mudcu.be/sketchpad/但我不是要添加到页面，而是要删除内容以显示其背后的图像。

这是“淘汰”之前和之后的示例：

http://www.titaniumwebdesigns.com/images/forums/before.png http://www.titaniumwebdesigns.com/images/forums/after.png

Answer 1

请参阅此complete DEMO

globalCompositeOperation是canvas api中最好的功能之一。

为了达到预期效果，我使用multiple canvas layers和globalCompositeOperation。

在此解决方案中，我们有3层：

第1层 - 底部 第2层 - 中间

第3层 - 顶部

中间层和顶层是静态的，只有中间层使用globalCompositeOperation动态清除。

middleCtx.globalCompositeOperation = "xor";

使用globalCompositeOperation = "xor"，画笔将在图层上绘制并清除画布中绘制它的部分。

最终结果是：

---

<强>更新

要验证窗口是否已完全清理，我创建一个隐藏的画布，其大小与其他图层相同，并在其上绘制一个黑色矩形。在画布上拖动鼠标时，图层2（中间）会被一个带有透明渐变颜色的圆圈清除，现在我们还在隐藏的画布上绘制一个白色圆圈（可能是任何不同颜色的黑色）。

所以，我们只是验证隐藏画布的像素，如果没有黑色像素，则清除窗口。

要获取图像数据，我们需要使用以下内容：

imageData = context.getImageData(x, y, width, height) 

然后从图像数据中获取像素：

pixels = imageData.data;

requestAnimationFrame例程用于性能原因，因为getImageData可能很慢。代码的主要变化是在拖动鼠标时将画笔动作放在动画帧内，而不是在每个鼠标移动事件中执行该操作。这允许处理器有更多时间进行像素数据验证。

以下是经过修改的小提琴，包括像素数据验证和清洁窗户时的警报：
 jsFiddle link

Answer 2

如果您有一个画布，其中您已经将模糊图像绘制到其中一次，您应该能够通过创建“画笔”图像（包含半透明圆圈，带有柔化边缘的图像）来创建该效果，以及然后使用以下方法在画布上的鼠标坐标处绘制该图像：

canvasContext.globalCompositeOperation = "destination-out";

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

只要您将模糊图像绘制到画布上，您只需要调用上面一行，之后所有绘制的图像将使用指定的复合操作。