javascript - 使用 JavaScript 的画布元素“擦掉”效果

Question

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

这是“擦掉”之前和之后的示例：

score 4 · Accepted Answer

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

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

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

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

第 3 层 - 顶部

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

middleCtx.globalCompositeOperation = "xor";

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

最终结果是：
在此处输入图像描述

更新：

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

依此类推，我们只验证隐藏画布的像素，如果没有黑色像素，则清理窗口。

要获取图像数据，我们需要使用类似的东西：

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

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

pixels = imageData.data;

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

这是修改后的 fiddle，带有像素数据验证和清理窗口时的警报：
jsFiddle 链接

score 1 · Accepted Answer

如果您有一个画布，您曾经在其中绘制了一个模糊图像，您应该能够通过创建一个“画笔”图像（包含一个半透明圆形，边缘柔和的图像）来创建这种效果，然后绘制它使用鼠标坐标在画布中的图像：

canvasContext.globalCompositeOperation = "destination-out";

将模糊图像绘制到画布上后，只需调用上述代码一次，之后所有绘制的图像都将使用指定的合成操作。

2 回答 2