我有一个画布< 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中最好的功能之一.
为了达到预期的效果,我使用了多个画布层和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