DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> HTML基礎知識 >> HTML5詳解 >> 跟KingDZ學HTML5之四:繼續探究Canvas之路徑
跟KingDZ學HTML5之四:繼續探究Canvas之路徑
編輯:HTML5詳解     

哈哈,開始吧,這節課第一個內容是 路徑。路徑,顧名思義,就是俺拿著畫筆,劃線呗。

畫圖的幾個步驟。

第一步:找個起點開始畫圖。----beginPath;

第二步:劃線,畫出自己想要的圖像 。

第三步:完成圖形,關閉路徑。 當然也可以什麼都不做,就是畫一個點或者一條線   ----- closePath

第四步:填顏色。

哈哈,對不對啊,俺上小學,美術老師就是這麼教的。

好了,先隨便畫一個圖形吧。---畫一條線,(*^__^*) 嘻嘻……

JavaScript Code復制內容到剪貼板
  1. <script type="text/Javascript">  
  2.         function draw() {  
  3.             var c = document.getElementById("mycanvas");  
  4.             var cxt = c.getContext("2d");  
  5.             cxt.beginPath();  
  6.             cxt.moveTo(10, 10);  
  7.             cxt.lineTo(100, 10);  
  8.             cxt.stroke();  
  9.         }  
  10.     </script>  
效果圖

11 
好了,一條線畫完了,我們簡單的說一下

moveTo 是一個十分有用的方法,它是繪制路徑的實用方法的一部分。

你可以把它想象成是把筆提起,並從一個點移動到另一個點的過程。

lineTo  當然是劃線了啊

括號中的那兩個參數,相當於坐標。

最後一步,

調用 stroke或 fill 方法,這步結束之後。

圖形才是實際的繪制到 canvas上去。

stroke是繪制圖形的邊框,fill會用填充出一個實心圖形。當調用 fill 時,開放的路徑會自動閉合,而無須調用 closePath ,這需要大家注意。

好了,有了上面的這兩句話,我們就畫一個  等邊直角三角形 吧

JavaScript Code復制內容到剪貼板
  1. <script type="text/Javascript">  
  2.         function draw() {  
  3.             var c = document.getElementById("mycanvas");  
  4.             var cxt = c.getContext("2d");  
  5.             cxt.beginPath();  
  6.             cxt.moveTo(10, 10);  
  7.             cxt.lineTo(100, 10);  
  8.             cxt.lineTo(100, 100);  
  9.             cxt.fill();  
  10.         }  
  11.     </script>  

1

當然,你要最後用 stroke() 就不得不這麼做了

JavaScript Code復制內容到剪貼板
  1. function draw() {  
  2.         var c = document.getElementById("mycanvas");  
  3.         var cxt = c.getContext("2d");  
  4.         cxt.beginPath();  
  5.         cxt.moveTo(10, 10);  
  6.         cxt.lineTo(100, 10);  
  7.         cxt.lineTo(100, 100);  
  8.         cxt.lineTo(10, 10);  
  9.         cxt.stroke();  
  10.     }  

1

呵呵,好玩不????

然後我們繼續吧,下面畫一個圓形。

arc 方法是來繪制弧線或圓。

JavaScript Code復制內容到剪貼板
  1. arc(x, y, radius, startAngle, endAngle, anticlockwise)   
  2. arc(x, y, radius, startAngle, endAngle, anticlockwise)  

該方法接受五個參數:

1、x,y 是圓心坐標; 
2、radius 是半徑; 
3、startAngle是起弧度(以 x 軸為基准); 
4、endAngle 是末弧度(以 x 軸為基准); 
5、anticlockwise 為 true 表示逆時針,反之順時針。

好了,工作貯備好了,繼續吧,

JavaScript Code復制內容到剪貼板
  1. function draw() {  
  2.     var c = document.getElementById("mycanvas");  
  3.     var cxt = c.getContext("2d");  
  4.     cxt.fillStyle = "#596";  
  5.     cxt.beginPath();  
  6.     cxt.arc(150, 150, 150, 0, Math.PI * 2, true);  
  7.     cxt.closePath();  
  8.     cxt.fill();  
  9. }  

1

畫了一個大圓圈。

注意:

arc 方法裡用到的角度是以弧度為單位而不是度。

度和弧度直接的轉換可以用這個表達式:var 弧度= (Math.PI/180)*角度 ;。JS 可不支持中文,這麼著理解簡單

當然,你可以畫一些弧線。例如

1

代碼如下

JavaScript Code復制內容到剪貼板
  1. function draw() {  
  2.             var c = document.getElementById("mycanvas");  
  3.             var cxt = c.getContext("2d");  
  4.             cxt.fillStyle = "#596";  
  5.             cxt.beginPath();  
  6.             cxt.arc(150, 150, 150, 1, Math.PI * 1.5, true);  
  7.             cxt.stroke();  
  8.         }  

下面,我們在實現一個效果,就是實現類似 掃雷的表格
1 

JavaScript Code復制內容到剪貼板
  1. <script type="text/Javascript">  
  2.         function draw() {  
  3.             var c = document.getElementById("mycanvas");  
  4.             var cxt = c.getContext("2d");  
  5.             cxt.beginPath();  
  6.             for (var x = 0.5; x < 200; x += 10) {  
  7.                 cxt.moveTo(x, 0);  
  8.                 cxt.lineTo(x, 200);  
  9.             }  
  10.             for (var y = 0.5; y < 200; y += 10) {  
  11.                 cxt.moveTo(0, y);  
  12.                 cxt.lineTo(200, y);  
  13.             }  
  14.             cxt.strokeStyle = "#ff0000";  
  15.             cxt.stroke();  
  16.         }  
  17.     </script>  


這個其實就是兩個循環罷了,

好了,完成任務,這節課到此結束。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved