微信小程序canvas截取任意形状的实现代码

drawPic(x,y,r){
  // const ctxBackground = wx.createCanvasContext('canvasBackground')
  const ctxBackground = wx.createCanvasContext('canvasBackground')
  ctxBackground.save();
  //开始一个新的绘制路径
  ctxBackground.beginPath();
  //设置路径起点坐标
  ctxBackground.moveTo(x, y);
  ctxBackground.arcTo(x, y - r, x + r, y - r, r);
  ctxBackground.lineTo(x + 2 * r, y - r);
  ctxBackground.arcTo(x + 2 * r, y - 2 * r, x + 3 * r, y - 2 * r, r);
  ctxBackground.arcTo(x + 4 * r, y - 2 * r, x + 4 * r, y - r, r);
  ctxBackground.lineTo(x + 5 * r, y - r);
  ctxBackground.arcTo(x + 6 * r, y - r, x + 6 * r, y, r);
  ctxBackground.lineTo(x + 6 * r, y + r);
  ctxBackground.arcTo(x + 7 * r, y + r, x + 7 * r, y + 2 * r, r);
  ctxBackground.arcTo(x + 7 * r, y + 3 * r, x + 6 * r, y + 3 * r, r);
  ctxBackground.lineTo(x + 6 * r, y + 4 * r);
  ctxBackground.arcTo(x + 6 * r, y + 5 * r, x + 5 * r, y + 5 * r, r);
  ctxBackground.lineTo(x + 4 * r, y + 5 * r);
  ctxBackground.arcTo(x + 4 * r, y + 4 * r, x + 3 * r, y + 4 * r, r);
  ctxBackground.arcTo(x + 2 * r, y + 4 * r, x + 2 * r, y + 5 * r, r);
  ctxBackground.lineTo(x + r, y + 5 * r);
  ctxBackground.arcTo(x, y + 5 * r, x, y + 4 * r, r);
  ctxBackground.lineTo(x, y + 3 * r);
  ctxBackground.arcTo(x + r, y + 3 * r, x + r, y + 2 * r, r);
  ctxBackground.arcTo(x + r, y + r, x, y + r, r);
  ctxBackground.lineTo(x, y);
  //先关闭绘制路径。注意，此时将会使用直线连接当前端点和起始端点。
  ctxBackground.closePath();
  ctxBackground.clip();
  ctxBackground.stroke(); //画线轮廓
  wx.getImageInfo({
   src: 'cloud://normal-env/000060.jpg',
   success: function (res) {
    ctxBackground.drawImage(res.path, 0, 0, 256, 191);
    ctxBackground.restore();
    ctxBackground.draw();
   }
  })
 }