使用 Canvas 的 clip() 方法限制绘制区域

使用 Canvas 的 clip() 方法可以限制绘制区域，超出限制区域的部分将不会被绘制。

示例代码：

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

// 绘制一个矩形
ctx.fillRect(50, 50, 100, 100);

// 限制绘制区域为一个圆形
ctx.beginPath();
ctx.arc(100, 100, 50, 0, 2 * Math.PI);
ctx.clip();

// 绘制一个矩形，但只有圆形内的部分会被绘制
ctx.fillRect(50, 50, 100, 100);

在上面的代码中，首先使用 fillRect() 方法绘制了一个矩形，然后使用 arc() 方法绘制了一个圆形，并使用 clip() 方法将绘制区域限制为圆形。最后再次使用 fillRect() 方法绘制了一个矩形，但只有圆形内的部分被绘制出来。