编写完整代码，JS中canvas绘图图像裁剪五角星效果

以下是使用 Canvas 绘制五角星并进行裁剪的完整代码：

HTML 代码：

<canvas id="canvas" width="400" height="400"></canvas>

JS 代码：

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

// 绘制五角星
ctx.beginPath();
ctx.moveTo(200, 0);
ctx.lineTo(238, 138);
ctx.lineTo(375, 138);
ctx.lineTo(262, 232);
ctx.lineTo(300, 370);
ctx.lineTo(200, 290);
ctx.lineTo(100, 370);
ctx.lineTo(138, 232);
ctx.lineTo(25, 138);
ctx.lineTo(162, 138);
ctx.closePath();
ctx.fillStyle = '#f00';
ctx.fill();

// 绘制裁剪区域
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(350, 50);
ctx.lineTo(350, 350);
ctx.lineTo(50, 350);
ctx.closePath();
ctx.clip();

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

// 绘制裁剪后的五角星
ctx.beginPath();
ctx.moveTo(200, 0);
ctx.lineTo(238, 138);
ctx.lineTo(375, 138);
ctx.lineTo(262, 232);
ctx.lineTo(300, 370);
ctx.lineTo(200, 290);
ctx.lineTo(100, 370);
ctx.lineTo(138, 232);
ctx.lineTo(25, 138);
ctx.lineTo(162, 138);
ctx.closePath();
ctx.fillStyle = '#f00';
ctx.fill();

在上面的代码中，首先我们使用 `ctx.beginPath()` 开始一条路径，然后使用 `ctx.moveTo()` 和 `ctx.lineTo()` 分别绘制五角星的五条边。在绘制完成后，我们使用 `ctx.closePath()` 将路径闭合，并使用 `ctx.fillStyle` 设置填充颜色，最后使用 `ctx.fill()` 进行填充。

接下来，我们使用 `ctx.beginPath()` 开始一条新路径，然后使用 `ctx.moveTo()` 和 `ctx.lineTo()` 绘制裁剪区域的四条边，并使用 `ctx.closePath()` 将路径闭合。接着，我们调用 `ctx.clip()` 方法将绘图区域设置为裁剪区域。

然后，我们使用 `ctx.clearRect()` 方法清空画布，并绘制裁剪后的五角星。在绘制时，我们使用与绘制原始五角星相同的代码，但由于画布已经被裁剪，因此只有在裁剪区域内的部分会被绘制出来。

最后，我们可以看到在画布中央绘制了一个被裁剪成矩形的五角星。