canvas实现擦除动画

• 原理总结为就是在移动设备上将某张图片擦掉显示另一张图片，利用canvas来实现。
• 如果是用户手动擦除，则需要监听touchmove,touchend等事件，并计算相应的坐标，利用canvas的clearRect或rect 画弧线或画线来实现。但是这会造成在androd手机上存在卡顿的现象。

• canvas有个globalCompositeOperation属性，这个属性的默认值是source-over,即当你在已有像素上进行绘图时会叠加。但是还有一个属性是destination-out,即在源图像外显示自己的目标图像，也就是在已有像素基础上绘图时，你绘制的区域里已有像素会被置为透明，有了这个属性后就意味着不需要用到clip等系列函数，直接用粗线条或者弧线就可以了，这样一来就减少绘图环境api的调用，性能会得到提升，在android上运行也会流畅很多。

  下面来展示下我的擦除代码：

let requestAnimationFrame = 
   window.requestAnimationFrame || 
   window.mozRequestAnimationFrame ||
   window.webkitRequestAnimationFrame ||     window.msRequestAnimationFrame;
let cancelAnimationFrame = window.cancelAnimationFrame ||  window.mozCancelAnimationFrame;
let a = 60;

let canvasCleaner = document.getElementById('cas-1');
let ctxCleaner = canvasCleaner.getContext('2d');
let canvasCleanerBox = document.querySelector('.slide-4');
let imgCleaner = new Image();
canvasCleaner.width = canvasCleanerBox.clientWidth  * 2;
canvasCleaner.height = canvasCleanerBox.clientHeight * 2;
canvasCleaner.style.width = canvasCleanerBox.cli