javascript - 使用 JavaScript 的 Canvas 元素 'rubbing out' 效果

Question

我有一个 Canvas <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 中最好的功能之一。

为了达到预期的效果，我使用了多个 Canvas 层和globalCompositeOperation。

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

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

第 3 层 - 顶部

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

middleCtx.globalCompositeOperation = "xor";

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

最后的结果是:

---

更新:

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

以此类推，我们只验证隐藏 Canvas 的像素，如果没有黑色像素，则清洁窗口。

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

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

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

pixels = imageData.data;

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

这是修改后的 fiddle ，带有像素数据验证和窗口清洁时的警报:
jsFiddle link