有一定间隔的头像列表压盖效果实现

问题

最近在开发小程序页面时，遇到了个头像列表的模块，设计稿效果如下图所示。初看效果图，似乎很简单，设置圆形边界外加每个头像左偏移，压盖上一个头像就可以了。但仔细观察就会发现头像之间还有部分的间隔，关键是这部分间隔还是透明的。

实现

经过多种尝试，每个头像的缺失部分，无法通过压盖来实现，也无法通过单纯的​

​CSS​

​​样式来实现。容易想到的一种思路是通过​

​canvas​

​​来实现，即通过​

​canvas​

​来完成每个头像的裁剪，然后通过偏移将头像间距调整到合适的位置。每个头像的裁剪示意图如下图所示：

使用​

​web​

​技术实现的核心代码如下：

// html
<canvas style="width: 200px; height: 200px"></canvas>

// js
const canvasElm = document.querySelector("canvas");
const ctx = canvasElm.getContext("2d");
const img = new Image();
img.src ="/image/url/path";
img.onload = () => {
  // 根据canvas大小计算圆形区域的半径
  const r = canvasElm.clientWidth / 2;
  // 设置canvas画布的大小
  canvasElm.width = 2 * r;
  canvasElm.height = 2 * r;
  ctx.save();
  // 设置圆形裁选区
  ctx.beginPath();
  ctx.arc(r, r, r, 2 * Math.PI, false);
  ctx.clip();
  // 绘制图片，只有落在裁选区的内容被显示
  ctx.drawImage(img, 0, 0, 2 * r, 2 * r);
  ctx.restore();
  // 设定新的裁选区
  ctx.beginPath();
  ctx.arc(2.4 * r, r, r, 2 * Math.PI, false);
  ctx.clip();
  // 只有落在裁选区的内容被清空
  ctx.clearRect(0, 0, 2 * r, 2 * r);
};      

坑及注意事项