canvas篇-使用clip限定绘图范围

在css中，我们可能遇到将div之类的裁剪成任意形状的情况，在css中我们可以用mask、clip-path来实现，在canvas中我们同样可以使用clip来将我们的绘制内容裁剪成任意形状，不过和css中不同的是在canvas中的clip实际是通过限制绘图区域来实现的。

裁剪方法一

1、绘制需要的clip限制的路径。

2、执行ctx.clip()，该方法会将上面绘制的路径当作后面我们实际需要绘制的图形的mask，也就是说后面绘制的图形只有在上面的路径范围内的才会显示。

3、绘制需要被裁剪的图形

  // 清空画布
  ctx.clearRect(0, 0, width, height);

  // 开始绘制clip的路径
  ctx.beginPath();
  ctx.arc(width / 2, height / 2, 100, 0, Math.PI * 2, false);
  ctx.closePath();
  
  // 将画布用以上路径进行clip
  ctx.clip();

  // 绘制图片
  ctx.drawImage(bitImage, 0, 0, width, height);

裁剪方法二

该方法使用Path2D，这是一个实验性的api，需要注意兼容性，不过它的优势在于可以直接将svg的path当作路径，对于一些复杂的路径进行裁剪时比较方便，其主要步骤和方法一类似，主要的区别在于创建path的过程。

const path = new Path2D('M201.5 255.392h136.964v-61.256c0-58.636 47.37-106.258 106.005-106.57 56.974-0.305 103.406 45.636 103.71 102.61 0.005 0.935-0.003 1.87-0.023 2.805l-1.365 62.41h132.79c57.162 0 103.5 46.34 103.5 103.5v137.05h63.882C903.316 495.941 949 541.625 949 597.98c0 56.353-45.684 102.037-102.037 102.037H783.08V834.5c0 57.161-46.338 103.5-103.5 103.5H550.474v-64.993c0-61.203-49.615-110.818-110.819-110.818-61.203 0-110.818 49.615-110.818 110.818V938H201.5C144.339 938 98 891.661 98 834.5V703.45h71.98c60.436 0 109.428-48.993 109.428-109.428 0-60.435-48.992-109.428-109.427-109.428H98V358.892c0-57.162 46.339-103.5 103.5-103.5z');

// 清空画布
ctx.clearRect(0, 0, width, height);

// 定义用于clip的Path2D，由于上面路径的范围过大，我们这里还构造了一个图形转换矩阵，
// 将路径大小，位置设置到我们想要的状态
const maskPath = new Path2D();
let domMatrix = new DOMMatrix([0.2, 0, 0, 0.2, 150, 60]);
maskPath.addPath(path, domMatrix);

// 对于Path2D使用clip需要将Path2D传入clip，这点和方法一略微不同
ctx.clip(maskPath);

// 绘制图片
ctx.drawImage(bitImage, 0, 0, width, height);