理解Canvas Context 的save() 和 restore()

時間 2019-12-19

標籤理解 canvas context restore 简体版

原文原文鏈接

🙂簡述

以前寫過一個基於canvas實現的共享寫做畫板應用，當時在寫這個應用的有畫板繪製的「前進」和「後退」功能，當時查了MDN上的Canvas文檔，看到了有save()和restore()兩個方法。文檔上是這樣解釋的使用 save() 方法保存默認的狀態，使用 restore()進行恢復當時尋思着或許能夠用這兩個方法實現，但是最後哦用的時候卻與預期的結果截然相反。這篇文章咱們來了解一下Cavas的save() 和 restore();html

🙂較規範的restore（）和 save()解釋

save()和restore()方法只會在有效範圍內生效，它是繪製狀態的存儲器，並非畫布內容的存儲器。它是基於狀態記錄的。
Canvas Context維持着繪製狀態的堆棧。區分繪製狀態：canvas

當前矩陣變換例如：平移translate()，縮放scale()，以及旋轉rotate()等
剪切區域clip()
如下屬性值： strokeStyle，fillStyle，globalAlpha，lineWidth，lineCap，lineJoin，miterLimit，shadowOffsetX，shadowOffsetY，shadowBlur，shadowColor，globalCompositeOperation，font，textAlign，textBaseline。
路徑和位圖不是繪圖狀態的一部分，使用save()和restore()不會生效。路徑是持久的，只能使用beginPath（）方法重置，位圖是畫布的屬性，而非上下文。
context.save()將當前狀態壓入堆棧。context.restore()彈出堆棧上的頂級狀態，將上下文恢復到該狀態。

🙂介紹一下場景吧

✈「變換」場景

一個canvas只有一個2d上下文，save()和restore()的使用場景也很普遍,例如 "變換"狀態的用途。
當你執行「變換」操做時，整個上下文的座標系都將會改變。「變換」以後，咱們須要將座標系恢復到原有正常的狀態，這時候就須要使用save()和restore()了。以下圖：bash

咱們看到在調用了restore()繪製的圖形並無發生變化，只是繪製狀態發生了變化。由於繪製好的圖形並不屬於繪製狀態。而restore()和save()只做用於繪製狀態。在個人那個基於canvas實現的共享寫做畫板應用中我想實現撤銷和恢復繪製內容並無起做用正式由於這個緣由，繪製的內容並不屬於繪製狀態，因此沒法撤銷繪製的內容，或者恢復撤銷的內容。post

😃碼字不如堆碼

咱們不如簡單的寫一下如何使用save()和restore()的代碼。ui

💻HTML code

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>Canvas Test</title>
    </head>
    <body
        <div>
            <canvas id="canvas" width="320" height="200">
                 This text is displayed if your browser does not support HTML5 Canvas.
            </canvas>
        </div>
    </body>
</html>
複製代碼

javscript code

var canvas,ctx;
function init() {
    canvas = document.getElementById("canvas");
    ctx = canvas.getContext("2d");
    draw();
}
function draw() {
    //初始的樣式（繪製狀態）並繪製矩形
    ctx.fillStyle = '#FA6900';
    ctx.shadowOffsetX = 5;
    ctx.shadowOffsetY = 5;
    ctx.shadowBlur    = 4;
    ctx.shadowColor   = 'rgba(204, 204, 204, 0.5)';
    ctx.fillRect(0,0,15,150);
    ctx.save(); //保存上述設置的繪製狀態
    
    //從新定義新的繪製狀態，並繪製矩形
    ctx.fillStyle = '#E0E4CD';
    ctx.shadowOffsetX = 10;
    ctx.shadowOffsetY = 10;
    ctx.shadowBlur    = 4;
    ctx.shadowColor   = 'rgba(204, 204, 204, 0.5)';
    ctx.fillRect(30,0,30,150);
    
    //繪製完以後，恢復到初始的繪製狀態，繼續進行繪畫。並繪製圓形，並不會恢復初始狀態下繪製的矩形。
    ctx.restore();
    ctx.beginPath();
    ctx.arc(305, 75, 8, 0, Math.PI*2, true);
    ctx.closePath();
    ctx.fill();
    }
    init();
複製代碼