canvas 局部添加遮罩层

在 canvas 中局部添加遮罩层，可以使用 `clip` 方法将遮罩层和需要遮罩的区域进行裁剪。具体的实现方法如下：

// 保存 canvas 的状态
ctx.save();

// 绘制需要遮罩的区域
ctx.beginPath();
ctx.arc(100, 100, 50, 0, Math.PI * 2);
ctx.closePath();
ctx.fillStyle = 'red';
ctx.fill();

// 将遮罩层和需要遮罩的区域进行裁剪
ctx.beginPath();
ctx.arc(100, 100, 50, 0, Math.PI * 2);
ctx.closePath();
ctx.clip();

// 绘制遮罩层
ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
ctx.fillRect(0, 0, canvas.width, canvas.height);

// 恢复 canvas 的状态
ctx.restore();

在上面的例子中，首先绘制了一个圆形，然后将圆形和 canvas 中的坐标系进行裁剪，从而实现了局部遮罩的效果。需要注意的是，在裁剪完之后，需要恢复 canvas 的状态，否则后续绘制的内容也会被裁剪掉。

除了 `clip` 方法外，还可以使用 `globalCompositeOperation` 属性来实现遮罩的效果。具体的实现方法如下：

// 绘制需要遮罩的区域
ctx.beginPath();
ctx.arc(100, 100, 50, 0, Math.PI * 2);
ctx.closePath();
ctx.fillStyle = 'red';
ctx.fill();

// 设置 globalCompositeOperation 属性
ctx.globalCompositeOperation = 'destination-in';

// 绘制遮罩层
ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
ctx.fillRect(0, 0, canvas.width, canvas.height);

// 恢复 globalCompositeOperation 属性
ctx.globalCompositeOperation = 'source-over';

在上面的例子中，首先绘制了一个圆形，然后将 `globalCompositeOperation` 属性设置为 `'destination-in'`，表示后续绘制的内容只会出现在圆形内部。最后绘制了遮罩层，然后将 `globalCompositeOperation` 属性恢复为默认值 `'source-over'`。需要注意的是，使用 `globalCompositeOperation` 属性来实现遮罩效果的时候，需要将 `globalCompositeOperation` 属性的值恢复为默认值，否则后续绘制的内容也会受到影响。