本文內容與路徑([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, 360 * Math.PI / 180, false ); 17 oGc.stroke(); 18 oGc.closePath(); 19 20 oGc.clip(); 21 function loadImg( imgPath ){ 22 var oImg = new Image(); 23 oImg.src = imgPath; 24 oImg.onload = function(){ 25 oGc.drawImage( oImg, 0, 0 ); 26 } 27 } 28 loadImg( './img/mv.jpg' ); 29 oBtn.onclick = function(){ 30 oGc.restore(); //恢復畫布最初始的狀態 31 loadImg( './img/mv2.jpg' ); 32 } 33 } 34 </script> 35 </head> 36 <body> 37 <canvas id="canvas" width="500" height="400"></canvas> 38 <br/><input type="button" value="加載另一張圖片"> 39 </body>
再次點擊之后，就沒有產生裁剪效果了
保存與恢復變形狀態，如果一個形狀產生多次平移效果，如果沒有保存和恢復狀態，那么平移相對的是他上一次變化后的狀態
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.fillStyle = '#09f'; 16 oGc.fillRect( 50, 50, 100, 100 ); 17 oGc.translate( 100, 100 ); 18 oGc.fillRect( 50, 50, 100, 100 ); 19 oGc.closePath(); 20 21 oGc.beginPath(); 22 // oGc.restore(); 23 oGc.fillStyle = 'red'; 24 oGc.translate( 150, 150 ); 25 oGc.fillRect( 50, 50, 100, 100 ); 26 oGc.closePath(); 27 } 28 </script> 29 </head> 30 <body> 31 <canvas id="canvas" width="500" height="400"></canvas> 32 </body>
把save()和restore打開，紅色的方塊將是針對第一次繪制的藍色方塊平移，而不是針對平移后的狀態平移【關於平移，后面會有文章，如果你有css3的基礎。這個跟css3是一樣的，就是相對原來的位置進行平移， 不過這里要注意一點，平移這個動作是寫在渲染(fillRect)之前】
保存與恢復字體相關樣式
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 text = '跟着ghostwu學習html5 canvas'; 13 14 oGc.font = 'bold 30px 微軟雅黑'; 15 oGc.fillStyle = '#09f'; 16 // oGc.save(); 17 oGc.fillText( text, 12, 60 ); 18 19 oGc.fillStyle = 'red'; 20 oGc.fillText( text, 12, 160 ); 21 22 // oGc.restore(); 23 oGc.fillText( text, 12, 260 ); 24 } 25 </script> 26 </head> 27 <body> 28 <canvas id="canvas" width="500" height="400"></canvas> 29 </body>
打開注釋的save和restore狀態之后，第三行文字就會應用到保存之前的狀態（天藍色：oGc.fillStyle = '#09f';）
