javascript - 着色此图像时为什么要使用保存和还原？

我找到了这段代码来着色画布图像文件。我想知道ist ctx.save和ctx.restore在此着色上下文中用于什么？为什么在这里需要它？

JS FIDDLE

        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);
    }

最佳答案

save和restore用于保存和还原所有上下文状态，例如fillStyle，lineWidth，globalCompositeOperation，剪切区域，当前上下文转换矩阵，等等。

提琴中save和restore的唯一必要目的是重置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，因为这会增加计算量。

关于javascript - 着色此图像时为什么要使用保存和还原？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/17299637/