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 >

。