本文内容与路径()是canvas中比较重要的概念。掌握理解他们是做出复杂canvas动画必要的基础之一.

再谈clip函数，这个函数在这篇文章已经有讲到过他的基本用法，我们来两个简单的例子复习一下：

1 
      2  7 42 43 44 
     45 
     46 

请注意，如果用矩形作为裁剪区域，用使用rect，不能使用strokeRect和fillRect，即下面这段代码不能改成strokeRect或者fillRect

oGc2.beginPath();

oGc2.strokeStyle = '#09f';

oGc2.rect( 0, 0, 100, 100 );

oGc2.stroke();

oGc2.closePath();

如果想在已经裁剪的区域中再加载一张新的图片，怎么做？

1 
      2  7 33 34 35 
     36 
37 

当点击按钮的时候，加载一张新的图片，但是加载后的图片，也产生了裁剪效果.

如果，不需要保留裁剪效果怎么做呢？利用save方法保存最初的状态，再加载图片的使用，用restore来恢复

1 
      2  7 35 36 37 
     38 
39 

再次点击之后，就没有产生裁剪效果了

保存与恢复变形状态，如果一个形状产生多次平移效果，如果没有保存和恢复状态，那么平移相对的是他上一次变化后的状态

1 
      2  7 29 30 31 
     32 

把save()和restore打开，红色的方块将是针对第一次绘制的蓝色方块平移，而不是针对平移后的状态平移【关于平移，后面会有文章，如果你有css3的基础。这个跟css3是一样的，就是相对原来的位置进行平移， 不过这里要注意一点，平移这个动作是写在渲染(fillRect)之前】

保存与恢复字体相关样式

1 
      2  7 26 27 28 
     29 

打开注释的save和restore状态之后，第三行文字就会应用到保存之前的状态（天蓝色：oGc.fillStyle = '#09f';）