canvas ctxclip边缘模糊

在使用canvas的ctx.clip进行裁剪时，可能会出现边缘模糊的情况。这是因为裁剪时的边缘会被平滑化，导致裁剪后的图像边缘模糊。

解决方法：

1.使用ctx.save()和ctx.restore()，在裁剪前先保存当前画布状态，裁剪后再恢复画布状态。

ctx.save(); // 保存画布状态
ctx.beginPath();
ctx.arc(x, y, r, 0, Math.PI * 2);
ctx.clip();
// do something
ctx.restore(); // 恢复画布状态

2.将裁剪路径向内缩小一定距离，再进行裁剪。这样可以避免边缘被平滑化的问题。

ctx.beginPath();
ctx.arc(x, y, r - 1, 0, Math.PI * 2); // 缩小1px
ctx.clip();
// do something

3.使用css的clip-path属性进行裁剪。clip-path可以直接设置裁剪路径，避免了canvas中裁剪时的边缘模糊问题。

.element {
  clip-path: circle(x, y, r);
}
``