[ html canvas save restore ] canvas绘图 save restore 属性实例演示

解析:

我们可以在做平移变换之前将当前canvas的状态进行保存，其实Canvas为我们提供了图层(Layer)的支持，而这些Layer(图层)是按"栈结构"来进行管理的

当我们调用save()方法，会保存当前Canvas的状态然后作为一个Layer(图层)，添加到Canvas栈中，另外，这个Layer(图层)不是一个具体的类，就是一个概念性的东西而已！

而当我们调用restore()方法的时候，会恢复之前Canvas的状态，而此时Canvas的图层栈会弹出栈顶的那个Layer，后继的Layer来到栈顶，此时的Canvas回复到此栈顶时保存的Canvas状态！

简单说就是：save()往栈压入一个Layer，restore()弹出栈顶的一个Layer，这个Layer代表Canvas的状态！也就是说可以save()多次，也可以restore()多次，但是restore的调用次数不能大于save 否则会引发错误！这是网上大部分的说法，不过实际测试中并没有出现这样的问题，即使我restore的次数多于save，也没有出现错误~目测是系统改了，等下测给大家看~ 来来来，写个例子验证下save和restore的作用！

 1 <!DOCTYPE html>
 2 <html lang='zh-cn'>
 3 <head>
 4 <title>Insert you title</title>
 5 <meta name='description' content='this is my page'>
 6 <meta name='keywords' content='keyword1,keyword2,keyword3'>
 7 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 8 <link rel='stylesheet' type='text/css' href='./css/index.css' />
 9 <script type='text/javascript' src='./js/jquery-1.12.1.min.js'></script>
10 <style type='text/css'>
11 html,body {
12     margin: 0; padding: 0;
13 }
14 
15 body {
16     background: #000;
17 }
18 
19 #can {
20     display: block; margin: 25px auto; background: #FFF; border-radius: 2px;
21 }
22 </style>
23 <script type='text/javascript'>
24     $( function(){
25         var canvas = $( '#can' ).get( 0 ).getContext( '2d' );
26         canvas.fillStyle = '#F00';
27         canvas.save(); //保存当前canvas的状态
28         
29         canvas.fillStyle = '#0F0';
30         canvas.translate( 100 , 100 );
31         canvas.fillRect( 50 , 50 , 50 , 50 );
32 
33         canvas.restore(); //恢复保存的Canvas的状态
34         canvas.fillRect( 50 , 50 , 50 , 50 );
35 
36     } );
37 </script>
38 </head>
39 <body>
40     <canvas id='can' width='500' height='450'>您的浏览器版本过低请升级您的浏览器版本以获取更好的用户体验...</canvas>
41 </body>
42 </html>