本文内容与路径([js高手之路] html5 canvas系列教程 - 开始路径beginPath与关闭路径closePath详解)是canvas中比较重要的概念。掌握理解他们是做出复杂canvas动画必要的基础之一.
再谈clip函数，这个函数在这篇文章[js高手之路] html5 canvas系列教程 - 图片操作(drawImage,clip,createPattern)已经有讲到过他的基本用法，我们来两个简单的例子复习一下：
1 <meta charset='utf-8' />
2 <style>
3 #canvas,#canvas2{
4 border:1px dashed #aaa;
5 }
6 </style>
7 <script>
8 window.onload = function(){
9 var oCanvas = document.querySelector( "#canvas" ),
10 oGc = oCanvas.getContext( '2d' );
11 var oCanvas2 = document.querySelector( "#canvas2" ),
12 oGc2 = oCanvas2.getContext( '2d' );
13
14 oGc.beginPath();
15 oGc.strokeStyle = '#09f';
16 oGc.arc( 100, 100, 100, 0, 360 * Math.PI / 180, false );
17 oGc.stroke();
18 oGc.closePath();
19
20 oGc.clip();
21
22 oGc.beginPath();
23 oGc.fillStyle = 'red';
24 oGc.fillRect( 100, 100, 200, 100 );
25 oGc.closePath();
26
27 oGc2.beginPath();
28 oGc2.strokeStyle = '#09f';
29 oGc2.rect( 0, 0, 100, 100 );
30 oGc2.stroke();
31 oGc2.closePath();
32
33 oGc2.clip();
34
35 oGc2.beginPath();
36 oGc2.fillStyle = 'red';
37 oGc2.arc( 100, 100, 100, 0, 360 * Math.PI / 180, false );
38 oGc2.fill();
39 oGc2.closePath();
40 }
41 </script>
42 </head>
43 <body>
44 <canvas id="canvas" width="500" height="400"></canvas>
45 <canvas id="canvas2" width="500" height="400"></canvas>
46 </body>
请注意，如果用矩形作为裁剪区域，用使用rect，不能使用strokeRect和fillRect，即下面这段代码不能改成strokeRect或者fillRect
oGc2.beginPath();
oGc2.strokeStyle = '#09f';
oGc2.rect( 0, 0, 100, 100 );
oGc2.stroke();
oGc2.closePath();
如果想在已经裁剪的区域中再加载一张新的图片，怎么做？
1 <meta charset='utf-8' />
2 <style>
3 #canvas{
4 border:1px dashed #aaa;
5 }
6 </style>
7 <script>
8 window.onload = function(){
9 var oCanvas = document.querySelector( "#canvas" ),
10 oGc = oCanvas.getContext( '2d' ),
11 oBtn = document.querySelector( "input" );
12
13 oGc.beginPath();
14 oGc.strokeStyle = '#09f';
15 oGc.arc( 100, 100, 100, 0, 360 * Math.PI / 180, false );
16 oGc.stroke();
17 oGc.closePath();
18
19 oGc.clip();
20 function loadImg( imgPath ){
21 var oImg = new Image();
22 oImg.src = imgPath;
23 oImg.onload = function(){
24 oGc.drawImage( oImg, 0, 0 );
25 }
26 }
27 loadImg( './img/mv.jpg' );
28 oBtn.onclick = function(){
29 loadImg( './img/mv2.jpg' );
30 }
31 }
32 </script>
33 </head>
34 <body>
35 <canvas id="canvas" width="500" height="400"></canvas>
36 <br/><input type="button" value="加载另一张图片">
37 </body>
当点击按钮的时候，加载一张新的图片，但是加载后的图片，也产生了裁剪效果.
如果，不需要保留裁剪效果怎么做呢？利用save方法保存最初的状态，再加载图片的使用，用restore来恢复
1 <meta charset='utf-8' />
2 <style>
3 #canvas{
4 border:1px dashed #aaa;
5 }
6 </style>
7 <script>
8 window.onload = function(){
9 var oCanvas = document.querySelector( "#canvas" ),
10 oGc = oCanvas.getContext( '2d' ),
11 oBtn = document.querySelector( "input" );
12
13 oGc.save(); //保存画布最初的状态，即没有产生裁剪效果的
14 oGc.beginPath();
15 oGc.strokeStyle = '#09f';
16 oGc.arc( 100, 100, 100, 0,