canvas中的状态保存与恢复

保存的方法save（）,恢复的方法restore（）

保存方法，是将状态保存在一个状态栈里，先进后出，后进先出。

示例demo：

<script>
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");

    //1、绘制一个绿色描边的矩形
    ctx.strokeStyle="green";
    ctx.lineWidth=3;
    ctx.setLineDash([10,5,2,5]);
    ctx.strokeRect(50,50,300,200);


    //2、绘制一个红色描边的圆
    ctx.beginPath();
    ctx.lineWidth=5;
    ctx.strokeStyle="red";
    ctx.setLineDash([]);
    ctx.arc(600,150,150,0,2*Math.PI);
    ctx.stroke();

    //3、绘制一个绿色描边的圆
    ctx.beginPath();
    ctx.setLineDash([10,5,2,5]);
    ctx.lineWidth=3;
    ctx.strokeStyle="green";
    ctx.arc(500,400,150,0,2*Math.PI);
    ctx.stroke();
</script>

运用保存和恢复的写法：

<script>
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    //1、绘制一个绿色描边的矩形
    ctx.strokeStyle="green";
    ctx.lineWidth=3;
    ctx.setLineDash([10,5,2,5]);
    ctx.strokeRect(50,50,300,200);

    ctx.save();


    //2、绘制一个红色描边的圆
    ctx.beginPath();
    ctx.lineWidth=5;
    ctx.strokeStyle="red";
    ctx.setLineDash([]);
    ctx.arc(600,150,150,0,2*Math.PI);
    ctx.stroke();


    //3、绘制一个绿色描边的圆
    ctx.beginPath();

    //恢复
    ctx.restore();

    ctx.arc(500,400,150,0,2*Math.PI);
    ctx.stroke();
</script>

save保存的状态栈的原理：先进后出：

<script>
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");

    //1、绘制一个绿色描边的矩形
    ctx.strokeStyle="green";
    ctx.lineWidth=3;
    ctx.setLineDash([10,5,2,5]);
    ctx.strokeRect(50,50,300,200);

    ctx.save();


    //2、绘制一个红色描边的圆
    ctx.beginPath();
    ctx.lineWidth=5;
    ctx.strokeStyle="red";
    ctx.setLineDash([]);
    ctx.arc(600,150,150,0,2*Math.PI);
    ctx.stroke();

    ctx.save();

    //3、绘制一个绿色描边的圆
    ctx.beginPath();

    //恢复
    ctx.restore();//恢复到第二个状态
    ctx.restore();//恢复到第一个状态

    ctx.arc(500,400,150,0,2*Math.PI);
    ctx.stroke();
</script>

保存和恢复方法使用的示例

demo1

<script>
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");

    ctx.strokeRect(0,0,300,200);

    ctx.save();

    ctx.translate(200,200);
    ctx.strokeRect(0,0,300,200);

    ctx.restore();

    ctx.clearRect(0,0,canvas.width,canvas.height);
</script>

demo2：

<script>
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");


    var x=0;

    var timer=setInterval(function(){

        ctx.clearRect(0,0,canvas.width,canvas.height);

        ctx.save();

        ctx.translate(x,0);
        ctx.strokeRect(0,0,300,200);

        ctx.restore();

        x++;

    },10);

</script>

。