路徑在canvas繪圖中，經常被用到，是一個非常重要的概念.
比如：我們要在canvas畫出3條直線，要求用不同的顏色加以區分.
1 <style> 2 body { 3 background: #000; 4 } 5 #canvas{ 6 background:white; 7 } 8 </style> 9 <script> 10 window.onload = function(){ 11 var oCanvas = document.querySelector( "#canvas" ), 12 oGc = oCanvas.getContext( '2d' ); 13 14 oGc.strokeStyle = 'red'; 15 oGc.moveTo( 50, 50 ); 16 oGc.lineTo( 500, 50 ); 17 oGc.stroke(); 18 19 oGc.strokeStyle = 'orange'; 20 oGc.moveTo( 50, 150 ); 21 oGc.lineTo( 500, 150 ); 22 oGc.stroke(); 23 24 oGc.strokeStyle = 'yellow'; 25 oGc.moveTo( 50, 250 ); 26 oGc.lineTo( 500, 250 ); 27 oGc.stroke(); 28 } 29 </script> 30 </head> 31 <body> 32 <canvas id="canvas" width="600" height="300"></canvas> 33 </body>
在畫每一條線之前，我都用storeStyle設置了線的顏色，但是，出來的結果卻是3條黃色的線，並不是紅、橙、黃三條顏色不同的線。為什么呢？
首先我們要搞清楚canvas渲染圖形，它是基於狀態的，所謂狀態就是每一次用( stroke/fill )之類的API渲染圖形的時候，canvas會檢查整個程序定義的( strokeStyle, fillStyle, lineWidth等 ）當一個狀態值沒有被改變時，canvas就一直用這個狀態。如果被改變，這里就要注意了：
1，如果使用beginPath()開始一個新的路徑，則不同路徑使用當前路徑的值
2，如果沒有使用beginPath()開始一個新的路徑，后面的會覆蓋前面的.
而我們這個程序就是屬於第2種情況，盡管strokeStyle被改變了，但是沒有用beginPath()開啟新路徑，所以前面兩個strokeStyle會被最后一個strokeStyle='yellow'覆蓋。所以3條線都是黃色.
看完這段解釋，你應該知道怎樣修改了吧？
只需要把每條線設置在不同的路徑中，就可以區分了
1 <style> 2 body { 3 background: #000; 4 } 5 #canvas{ 6 background:white; 7 } 8 </style> 9 <script> 10 window.onload = function(){ 11 var oCanvas = document.querySelector( "#canvas" ), 12 oGc = oCanvas.getContext( '2d' ); 13 14 oGc.beginPath(); 15 oGc.strokeStyle = 'red'; 16 oGc.moveTo( 50, 50 ); 17 oGc.lineTo( 500, 50 ); 18 oGc.stroke(); 19 20 oGc.beginPath(); 21 oGc.strokeStyle = 'orange'; 22 oGc.moveTo( 50, 150 ); 23 oGc.lineTo( 500, 150 ); 24 oGc.stroke(); 25 26 oGc.beginPath(); 27 oGc.strokeStyle = 'yellow'; 28 oGc.moveTo( 50, 250 ); 29 oGc.lineTo( 500, 250 ); 30 oGc.stroke(); 31 } 32 </script> 33 </head> 34 <body> 35 <canvas id="canvas" width="600" height="300"></canvas> 36 </body>
closePath：關閉路徑
所謂關閉路徑就是：指的是將同一個路徑中的起點與終點相連接.
比如，我們畫個三角形，不使用路徑的時候，我們這樣做：
1 <style> 2 body { 3 background: #000; 4 } 5 #canvas{ 6 background:white; 7 } 8 </style> 9 <script> 10 window.onload = function(){ 11 var oCanvas = document.querySelector( "#canvas" ), 12 oGc = oCanvas.getContext( '2d' ); 13 14 oGc.moveTo( 50, 50 ); 15 oGc.lineTo( 250, 50 ); 16 oGc.lineTo( 250, 150 ); 17 oGc.lineTo( 50, 50 ); 18 oGc.stroke(); 19 } 20 </script> 21 </head> 22 <body> 23 <canvas id="canvas" width="600" height="300"></canvas> 24 </body>
最后一次用lineTo( 50, 50 )連接到起點，如果我們使用closePath，就不需要這一步操作了.
1 <style> 2 body { 3 background: #000; 4 } 5 #canvas{ 6 background:white; 7 } 8 </style> 9 <script> 10 window.onload = function(){ 11 var oCanvas = document.querySelector( "#canvas" ), 12 oGc = oCanvas.getContext( '2d' ); 13 14 oGc.moveTo( 50, 50 ); 15 oGc.lineTo( 250, 50 ); 16 oGc.lineTo( 250, 150 ); 17 oGc.closePath(); 18 oGc.stroke(); 19 } 20 </script> 21 </head> 22 <body> 23 <canvas id="canvas" width="600" height="300"></canvas> 24 </body>
在stroke之前，用closePath關閉路徑，他就會把（ 250， 150）這個點和起始點( 50, 50 )連接起來.
畫2個三角形：
1 var oCanvas = document.querySelector( "#canvas" ), 2 oGc = oCanvas.getContext( '2d' ); 3 4 oGc.moveTo( 50, 50 ); 5 oGc.lineTo( 250, 50 ); 6 oGc.lineTo( 250, 150 ); 7 oGc.closePath(); 8 oGc.stroke(); 9 10 oGc.moveTo( 50, 150 ); 11 oGc.lineTo( 250, 150 ); 12 oGc.lineTo( 250, 250 ); 13 oGc.closePath(); 14 oGc.stroke();
使用路徑，繪制兩個不同顏色的三角形：
1 <style> 2 body { 3 background: #000; 4 } 5 #canvas{ 6 background:white; 7 } 8 </style> 9 <script> 10 window.onload = function(){ 11 var oCanvas = document.querySelector( "#canvas" ), 12 oGc = oCanvas.getContext( '2d' ); 13 14 //這段oGc.beginPath可有可無，不會影響結果，但是建議加上，代碼可讀性比較好一點 15 oGc.beginPath(); 16 oGc.strokeStyle = 'red'; 17 oGc.moveTo( 50, 50 ); 18 oGc.lineTo( 250, 50 ); 19 oGc.lineTo( 250, 150 ); 20 oGc.closePath(); 21 oGc.stroke(); 22 23 oGc.beginPath(); 24 oGc.strokeStyle = '#09f'; 25 oGc.moveTo( 50, 150 ); 26 oGc.lineTo( 250, 150 ); 27 oGc.lineTo( 250, 250 ); 28 oGc.closePath(); 29 oGc.stroke(); 30 } 31 </script> 32 </head> 33 <body> 34 <canvas id="canvas" width="600" height="300"></canvas> 35 </body>
