js canvas实现擦除动画

 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.clientWidth + 'px';
canvasCleaner.style.height = canvasCleanerBox.clientHeight + 'px';
imgCleaner.src = 'https://gw.alicdn.com/tps/TB1XbyCKVXXXXXEXpXXXXXXXXXX-1080-1920.jpg';
imgCleaner.onload = ()=> {
    let width = parseInt(canvasCleaner.style.width);
    w = canvasCleaner.width*(imgCleaner.height/imgCleaner.width);
    ctxCleaner.drawImage(imgCleaner, 0, 0, canvasCleaner.width, w );

  ctxCleaner.lineCap = 'round';//lineCap 属性设置或返回线条末端线帽的样式。
  ctxCleaner.lineJoin = 'round';
  ctxCleaner.lineWidth = 100;//设置或返回当前线条的宽度
  ctxCleaner.globalCompositeOperation = 'destination-out';
}

let drawline = (x1, y1,ctx)=> {
  ctx.save();
  ctx.beginPath();
  ctx.arc(x1,y1, a, 0, 2 * Math.PI);
  ctx.fill();//fill() 方法填充当前的图像（路径）。默认颜色是黑色。
  ctx.restore();
};
/* d 为擦除区域点坐标，我自己模拟需要擦除的形状得到的数据类似如下：
let d2 = [
  [1,190],[30,180],[60,170],[90,168],[120,167],[150,165],[180,164],[210,163],[240,160],[270,159],[300,154],[330,153],[360,152],
  [390,150],[420,140],[450,130],[480,120],[510,120],[540,120],[570,120],[600,120],[630,120],[660,120],[690,120],[720,120],
  [1,190],[20,189],[28,186],[45,185],[50,185],[62,184],[64,182],[90,180],[120,178],
  [160,176],[200,174],[240,172];*/
let draw = (d,ctx)=> {
  if(idx >= d.length) {
    cancelAnimationFrame(ts);
  }else {
    drawline(d[idx][0], d[idx][1],ctx);
    idx++;
    requestAnimationFrame(()=> {
      draw(d, ctx);
    });
  }
}

canvas.width = canvasBox.clientWidth * 2;
canvas.height = canvasBox.clientHeight * 2;
canvas.style.width = canvas.clientWidth + 'px';
canvas.style.height = canvas.clientHeight * 'px';
w = canvas.width*(img.height/img.width);
  // console.log(w);
  ctx.drawImage(img, 0, 0, canvas.width , w);