Javascript 为此图像着色时为什么使用“保存和还原”？

我发现这段代码用于对画布图像文件着色。我想知道在这个着色上下文中ist ctx.save和ctx.restore的用途是什么？为什么这里需要它

        function recolor(color) {
        ctx.save();
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.drawImage(pic, 0, 0);
        ctx.globalCompositeOperation = "source-in";
        ctx.fillStyle = color;
        ctx.rect(0, 0, canvas.width, canvas.height);
        ctx.fill();
        ctx.restore();
        var img = new Image();
        img.src = canvas.toDataURL();
        return (img);
    }

---

ctx保存和还原用于保存当前上下文状态。这通常在函数中使用，因此您可以在任何地方调用它们，而不用担心它会在函数之外更改绘图状态

---

例如，在这段代码中，您更改了fillStyle。调用ctx.restore后，填充样式将恢复到调用ctx.save时的状态。

save

和

restore

用于保存和恢复所有上下文状态，例如

fillStyle

，

线宽

，

globalCompositeOperation

，剪切区域，当前上下文转换矩阵，等等

小提琴中的

保存

和

恢复

的唯一必要目的是重置

全局复合操作

您可以手动执行此操作：

    function recolor(color) {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.drawImage(pic, 0, 0);
        ctx.globalCompositeOperation = "source-in";
        ctx.fillStyle = color;
        ctx.rect(0, 0, canvas.width, canvas.height);
        ctx.fill();

        //instead of save and restore:
        ctx.globalCompositeOperation = "source-over";

        var img = new Image();
        img.src = canvas.toDataURL();
        return (img);
    }

一般情况下，您应该避免使用

save

和

restore

，除非您必须这样做，因为这可能会增加计算成本