canvas 局部设置globalCompositeOperation

可以使用 `save()` 和 `restore()` 方法在 canvas 中局部设置 `globalCompositeOperation` 属性。`save()` 方法可以保存当前 canvas 的状态，包括绘制样式、变换信息等，而 `restore()` 方法可以恢复之前保存的状态。

以下是一个示例代码：

// 获取 canvas 对象和上下文
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

// 绘制第一个路径
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(150, 50);
ctx.lineTo(150, 150);
ctx.lineTo(50, 150);
ctx.closePath();
ctx.fillStyle = "red";
ctx.fill();

// 保存当前状态
ctx.save();

// 设置绘制模式为 destination-out
ctx.globalCompositeOperation = "destination-out";

// 绘制第二个路径，重叠部分将被清除
ctx.beginPath();
ctx.moveTo(100, 100);
ctx.lineTo(200, 100);
ctx.lineTo(200, 200);
ctx.lineTo(100, 200);
ctx.closePath();
ctx.fillStyle = "blue";
ctx.fill();

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

// 绘制第二个路径，不受绘制模式的影响
ctx.beginPath();
ctx.moveTo(100, 100);
ctx.lineTo(200, 100);
ctx.lineTo(200, 200);
ctx.lineTo(100, 200);
ctx.closePath();
ctx.fillStyle = "green";
ctx.fill();

在这个示例中，我们先绘制了一个红色矩形，然后使用 `save()` 方法保存了当前状态。接着，我们设置绘制模式为 `destination-out`，并绘制了一个蓝色矩形。由于设置的是局部属性，只有蓝色矩形受到了影响，而之前的红色矩形和之后的绿色矩形并不受影响。

最后，我们使用 `restore()` 方法恢复了之前保存的状态，并绘制了一个绿色矩形。需要注意的是，恢复状态后，绘制模式也被恢复为之前的默认模式。