画布元素'；磨平'；JavaScript的效果

我有一个画布

，它显示一个不干净窗口的图形。我需要能够'清洁'的窗口与我的光标，显示另一个图像背后。就像这个网站使用画笔一样：但我需要删除内容以显示页面后面的图像，而不是添加到页面中

这里有一个关于“擦掉”前后的示例：

---

如果您有一个画布，其中您曾经在其中绘制过模糊图像，您应该能够通过创建一个“画笔”图像（一个包含半透明圆的图像，具有软边）来创建该效果，然后使用以下方法在画布中的鼠标坐标处绘制该图像：

canvasContext.globalCompositeOperation = "destination-out";

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

参见此

globalCompositeOperation

是canvas api中最优秀的功能之一

为了达到预期效果，我使用了

多个画布层

和

全局复合操作

middleCtx.globalCompositeOperation = "xor";

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

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

第3层-顶部

中间层和顶层是静态的，只有中间层可以使用

globalCompositeOperation

动态清除

middleCtx.globalCompositeOperation = "xor";

使用

globalCompositeOperation=“xor”

，画笔将在图层上绘制，并清除画布上绘制它的部分

最终结果是：

---

更新：

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

因此，我们只需验证隐藏画布的像素，如果没有黑色像素，则清除窗口

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

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

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

pixels = imageData.data;

出于性能原因，使用了

requestAnimationFrame

例程，因为

getImageData

可能速度较慢。代码中的主要更改是在拖动鼠标时将笔刷动作放入动画帧中，而不是在每个鼠标移动事件中执行该动作。这允许处理器有更多的时间进行像素数据验证

以下是修改后的fiddle with pixel data verification，以及在清理窗口时发出的警报：

---

好的，太好了-这很有道理。你能举个例子吗？我目前正在写我自己的例子：很好的例子，我不会说这是肮脏的！再次感谢。回答得很好-当窗口被完全清除时，是否有某种回调函数可以放置到位？@tianium:是的！这有点难，因为像素操作，但我做了，并更新了答案。（可能是其他方式，这只是我的）。希望能有所帮助。