Question

我发现此代码用于着色画布图像文件。我想知道什么是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);
    }

Answer 1

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，因为它的计算成本可能会很高。

Answer 2

ctx save和restore用于保存当前上下文状态。这通常用在函数中，这样你就可以在任何地方调用它们，而不用担心它会改变函数之外的绘制状态。

例如，在此代码中，您可以更改fillStyle。一旦调用了ctx.restore，填充样式将返回到调用ctx.save时的样式。

为什么在着色此图像时使用保存和恢复？

2 个答案: