使用 JavaScript 画布元素“擦除”效果
Oli*_*pin 5 javascript drawing canvas drawable html5-canvas
我有一个画布<canvas></canvas>，上面显示了不干净的窗户的图形。我需要能够用光标“清理”窗口，在其后面显示另一个图像。正如该网站使用他们的画笔一样：http://mudcu.be/sketchpad/，但我需要删除内容以显示其后面的图像，而不是添加到页面。
这是“擦掉”之前和之后的示例：
http://www.titaniumwebdesigns.com/images/forums/before.png http://www.titaniumwebdesigns.com/images/forums/after.png
查看这个完整的演示
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 链接