clip之后裁剪之外的区域不能绘图，绘画无效

在使用beginPath 、clip之前save一下，在clip之后restore，使用的canvas是小程序的canvas，img这里跟h5这里不一样，其他的api基本都一致

async function clipUserAvater ({
  canvasCtx,
  canvas,
  url,
  bg,
}: {
  canvas: any;
  canvasCtx: any;
  url?: string;
  bg: any;
}) {
  canvasCtx.save();
  const userImg = canvas.createImage();
  userImg.src = url ?? DefaultAvatar;
  userImg.crossOrigin = "anonymous";
  const imgRes = await new Promise(resolve => {
    userImg.onerror = () => {
      resolve(DefaultAvatar);
    };
    userImg.onload = () => {
      resolve(userImg);
    };
  });
  // 裁剪圆形头像
  canvasCtx.beginPath();
  canvasCtx.arc(
    20 + bg.width / 16,
    20 + bg.width / 16,
    bg.width / 16,
    0,
    Math.PI * 2,
  );
  canvasCtx.clip();
  canvasCtx.drawImage(
    imgRes,
    20,
    20,
    bg.width / 8,
    bg.width / 8,
  );
  canvasCtx.restore();
  return true;
}