1

このコードは、キャンバスの画像ファイルに色合いを付けることがわかりました。この色合いのコンテキストで ctx.save と ctx.restore が何に使用されているのか疑問に思っていますか? なぜここで必要なのですか？

JSフィドル

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

2 に答える 2

2

save、、、クリッピング領域、現在のコンテキスト変換行列など、restoreすべてのコンテキスト状態を保存および復元するために使用されます。fillStylelineWidthglobalCompositeOperation

saveフィドルのandの唯一の必要な目的は、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);
    }

一般にandは、計算コストが高くなる可能性があるため、絶対に必要な場合を除き、使用saveしないでください。restore

于 2013-06-25T17:09:45.483 に答える