使用HTML5 Canvas繪製直線或折線等線條的方法來講解_html5教學技巧

HTML5 Canvas基本概念講解
html5，這應該就不需要多作介紹了，只要是開發人員應該都不會陌生。 html5是「新興」的網頁技術標準，目前，除IE8及其以下版本的IE瀏覽器之外，幾乎所有主流瀏覽器(FireFox、Chrome、Opera、Safari、IE9 )都已經開始支援html5了。除此之外，在行動瀏覽器市場上，眾多的行動瀏覽器也紛紛展開關於「html5的支援能力以及效能表現」的軍備競賽。 html作為革命性的網頁技術標準，加上許多瀏覽器廠商或組織的鼎力支持，可以想見，html5將會成為未來網頁技術的領頭羊。

html5，說其是「新興」的，其實也不算新了。畢竟，html5早在2008年第一份正式草案就已經對外公佈。從2008年算起，到現在也算是有些年頭了。不過，到目前為止，對於大多數開發人員而言，仍然是「雷聲大，雨點小」——聽說html5的多，實際使用html5的卻很少。

眾所周知，html5中增加了許多新特性。在html5的眾多特性中，Canvas應該算是最引人注目的新功能之一。我們使用html5的Canvas物件可以直接在瀏覽器的網頁上繪製圖形。這表示瀏覽器可以脫離Flash等第三方插件，直接在網頁上顯示圖形或動畫。

現在，我們就來為html5初學者介紹如何使用html5 Canvas繪製基本的圖形。

首先，我們要準備以下html基礎程式碼：

XML/HTML Code複製內容到剪貼簿

1. html>  
2. html>  
3. head>  
4. meta charset="UTF-8 ">  
5. title>HTML5 Canvas入門範例HTML5 Canvas入門範例HTML5 Canvas入門範例HTML5 Canvas入門範例
>title
6. >  
head
7. >  
body
8. >
  
9.   
body
10. >  
html

>

  

上述程式碼是一個html5頁面的基本程式碼範本。其中，第一行程式碼是一個文檔類型標籤指令，這也是html5頁面的標準文檔類型指令，用於告訴瀏覽器「這是一個html5頁面，請按照html5的網頁標準來解析顯示該頁面」。第4行程式碼用來告訴瀏覽器「這個html5頁面的字元編碼為UTF-8」，這也是html5網頁設定字元編碼的標準寫法。這與以往的html字元編碼指令有所不同。

XML/HTML Code
1. 複製內容到剪貼簿
2.    meta http-equiv -類型" content="text/html;charset=UTF-8"
>

>

>

>>>>>>>>>>>>   

現在，我們就在包含上述程式碼的html檔案中進行Canvas繪製圖形的實例講解。首先，我們在上述html程式碼的body部分加入如下canvas標籤。

XML/HTML Code複製內容到剪貼簿

1. html>  
2. html>  
3. head>  
4. meta charset="UTF-8 ">  
5. title>HTML5 Canvas入門範例HTML5 Canvas入門範例HTML5 Canvas入門範例HTML5 Canvas入門範例
>title
6. >  
head
7. >  
body
8. >
  
9.   
10.    canvas id=id=id= width="400px" "300px" style=
"border: 1px solid red; >
11.   
12. 您的瀏覽器不支援canvas標籤。    canvas>
13.   
14.    body>
15.    html>

  

此時，我們使用支援html5的瀏覽器開啟該頁面，將會看到以下內容：

在html5中，canvas標籤本身並沒有任何行為，只是在頁面上佔用指定大小的頁面空白空間。 canvas標籤就相當於一塊空白的畫布，也需要我們自己使用JavaScript提供的canvas API編寫對應的程式碼從而在這塊畫布上繪製出我們想要的圖形。

備註：canvas標籤體內的文字內容將會以不支援html5的瀏覽器顯示。如上述html程式碼所示，如果你的瀏覽器不支援html5的canvas標籤，那麼將會在canvas標籤處顯示文字「您的瀏覽器不支援canvas標籤」。
身為「畫家」的我們，首先需要熟悉手中的畫筆，也就是JavaScript中的Canvas物件及其相關內容。

在html5中，一個canvas標籤對應一個Canvas對象，我們在JavaScript可以使用document.getElementById()等常規函數來取得該物件。值得注意的是，在JavaScript中，我們並不是直接操作Canvas對象，而是透過Canvas物件來取得對應的圖形繪製上下文物件CanvasRenderingContext2D，然後我們再利用CanvasRenderingContext2D物件自帶的許多繪製圖形的函數來繪圖。

這就好像是每一張畫布都對應一支畫筆，要想在畫布上繪畫，我們就先要拿到對應的畫筆，然後使用這支畫筆在畫布上繪圖。 CanvasRenderingContext2D物件就相當於這支畫筆。現在，我們就先來嘗試在JavaScript中拿到這支畫筆。

XML/HTML Code複製內容到剪貼簿

1. html>  
2. html>  
3. head>  
4. meta charset="UTF-8 ">  
5. title>HTML5 Canvas繪製線條入門範例> title>  
6. head>  
7. body>  
8.   
9.   
10. canvas id=id=id= width="400px" "300px" style="border: 1px solid red; >   您的瀏覽器不支援canvas標籤。   
12. canvas>     
14. script type=type=type=>  
15. //取得Canvas物件(畫布)   
16. var canvas = document
  
//單純偵測目前瀏覽器是否支援Canvas對象，以免在一些不支援html5的瀏覽器中提示語法錯誤   
if(canvas.getContext){   
    //取得對應的CanvasRenderingContext2D物件(畫筆)   
    var 
21. ctx = canvas.Congetn("2d"); }   
23. script>  
24. body>  
25. html>  

    如上述程式碼所示，我們可以使用Canvas物件的getContext()方法來取得CanvasRenderingContext2D物件。比較細心的讀者應該注意到了：getContext()方法需要傳入一個字串－2d，取得到的CanvasRenderingContext2D物件的名稱中也帶有2D。這是因為，目前html5只支援2D繪圖，但在未來的html5中也可能支援3D或其他形式的繪圖。屆時，我們可能就需要使用getContext("3d")來取得CanvasRenderingContext3D物件並繪製3D圖形了。

    使用html5 canvas繪製線條(直線、折線等)
    使用html5 Canvas繪製直線所需的CanvasRenderingContext2D物件的主要屬性和方法(有"()"者為方法)如下：
    

    属性或方法	基本描述
    strokeStyle	用于设置画笔绘制路径的颜色、渐变和模式。该属性的值可以是一个表示css颜色值的字符串。如果你的绘制需求比较复杂，该属性的值还可以是一个CanvasGradient对象或者CanvasPattern对象
    globalAlpha	定义绘制内容的透明度，取值在0.0(完全透明)和1.0(完全不透明)之间，默认值为1.0。
    lineWidth	定义绘制线条的宽度。默认值是1.0，并且这个属性必须大于0.0。较宽的线条在路径上居中，每边各有线条宽的一半。
    lineCap	指定线条两端的线帽如何绘制。合法的值是 "butt"、"round"和"square"。默认值是"butt"。
    beginPath()	开始一个新的绘制路径。每次绘制新的路径之前记得调用该方法。它将重置内存中现有的路径。
    moveTo(int x, int y)	移动画笔到指定的坐标点(x,y)，该点就是新的子路径的起始点
    lineTo(int x, int y)	使用直线连接当前端点和指定的坐标点(x,y)
    stroke(int x, int y)	沿着绘制路径的坐标点顺序绘制直线
    closePath()	如果当前的绘制路径是打开的，则关闭掉该绘制路径。此外，调用该方法时，它会尝试用直线连接当前端点与起始端点来关闭路径，但如果图形已经关闭(比如先调用了stroke())或者只有一个点，它会什么都不做。

    
    在Canvas的圖形繪製過程中，幾乎都是先按照一定順序先定下幾個座標點，也就是所謂的繪製路徑，然後再根據我們的需要將這些座標點用指定的方式連接起來，就形成了我們所需要的圖形。當我們了解了CanvasRenderingContext2D物件的上述API後，那麼繪製線條就顯得非常簡單了。

    使用canvas繪製基本的直線

    現在，我們就使用canvas來繪製最基本的直線。

    JavaScript Code複製內容到剪貼簿

    1. html>   
    2.   
    3.   
    4. "UTF-8">   
    5.   
    6.   
    7.   
    8.   
    9.   
    10. "myCanvas" width="400px""400px" style="border: 1px solid red;">   
    11. 您的瀏覽器不支援canvas標籤。   
    12.   
    13.   
    15. //取得Canvas物件(畫布)   
    16. var canvas = document.getElementById("myCanvas"
    17. //簡單地偵測目前瀏覽器是否支援Canvas對象，以免在一些不支援html5的瀏覽器中提示語法錯誤   
    18. if(canvas.getContext){     
    19.     //取得對應的CanvasRenderingContext2D物件(畫筆)   
    20.     var ctx = canvas.getContext("2d";
           
        
    22. //注意，Canvas的座標係是：Canvas畫布的左上角為原點(0,0)，向右為橫座標，向下為縱座標，單位是像素(px)。   
           
        
    24. //開始一個新的繪圖路徑   
        ctx.beginPath();   
        
    26. //定義直線的起點座標為(10,10)   
        ctx.moveTo(10, 10);   
        
    28. //定義直線的終點座標為(50,10)   
        ctx.lineTo(50, 10);   
        
    30. //沿著座標點順序的路徑繪製直線   
        ctx.stroke();   
        
    32. //關閉目前的繪圖路徑   
        ctx.closePath();   
    }   
      
      
      

    顯示效果如下：
    

    使用canvas繪製有顏色的直線

    大家都知道，在現實世界中，畫筆也是多種多樣的，並且具有各種不同的顏色。同樣的，Canvas的畫筆CanvasRenderingContext2D物件也同樣可以有你所需要的各種顏色。在上面的程式碼範例中，我們沒有指定顏色的話，Canvas的畫筆就預設為最常見的黑色。

    現在我們再次使用Canvas的畫筆繪製一條藍色的直線(基於頁面簡潔考慮，下面只給出關鍵的JavaScript程式碼，請同時參考上面完整的程式碼範例)。

    XML/HTML Code複製內容到剪貼簿

    1. html>  
    2. html>  
    3. head>  
    4. meta charset="UTF-8 ">  
    5. title>HTML5 Canvas繪製線條入門範例> title>  
    6. head>  
    7. body>  
    8.   
    9.   
    10. canvas id=id=id= width="400px" "300px" style="border: 1px solid red; >   您的瀏覽器不支援canvas標籤。  
    11. canvas>  
    12.   
    13. script type=type=type=>
    14.   
    15. //取得Canvas物件(畫布)    var canvas = document
    16. //單純偵測目前瀏覽器是否支援Canvas對象，以免在一些不支援html5的瀏覽器中提示語法錯誤   
    17. if(canvas.getContext){     
    18.     //取得對應的CanvasRenderingContext2D物件(畫筆)   
    19.     var ctx = canvas.
    20.        
    21.     //開始一個新的繪製路徑   
    22.     ctx.beginPath();   
    23.     //定義直線的起點座標為(10,10)   
    24.     ctx.moveTo(10, 10);   
    25.     //定義直線的終點座標為(50,10)   
    26.     ctx.lineTo(50, 10);   
    27.     //沿著座標點順序的路徑繪製直線   
    28.     ctx.stroke();   
    29.     //關閉目前的繪圖路徑   
    30.     ctx.closePath();   
    31.   
    32.     //繪製一條有顏色的直線   
    33.     ctx.moveTo(10, 30);   
    34.     ctx.lineTo(50, 30);   
    35.     //支持css顏色值的各種表現形式，例如："blue"、"#0000ff"、"#00f"、"rgb(0,0,255)"、"rgba(0,0,255, 1)"   
    36.     //顏色等各種設置，必須在最終的繪製函數stroke()之前調用   
    37.     ctx.strokeStyle = "blue";     ctx.stroke();   
    38.     //關閉目前的繪圖路徑   
    39.     ctx.closePath();   
    40. }   
    42. script>  
    43. body>  
    44. html>  

    對應的顯示效果如下圖：

    
    使用canvas繪製基本的折線

    當我們掌握了Canvas繪製直線之後，繪製折線等其他形式的線條就簡單多了。我們只需要多繪製幾個路徑中間點，並依序將它們連接起來即可。

    JavaScript Code

    複製內容到剪貼簿

    1. <script><span class="string">"text/javascript"</script>>   
    2. //取得Canvas物件(畫布)   
    3. var canvas = document.getElementById("myCanvas"
    4. //簡單地偵測目前瀏覽器是否支援Canvas對象，以免在一些不支援html5的瀏覽器中提示語法錯誤   
    5. if(canvas.getContext){     
    6.     //取得對應的CanvasRenderingContext2D物件(畫筆)   
    7.     var ctx = canvas.getContext(        
    8.     //開始一個新的繪圖路徑
    9.        ctx.beginPath();   
    10.     //設定線顏色為藍色
    11.        ctx.strokeStyle = "blue"
    12. ;        //設定路徑起點座標
    13.        ctx.moveTo(20, 50);   
    14.     //定義中點座標1
    15.        ctx.lineTo(60, 50);   
    16.     //定義中點座標2
    17.        ctx.lineTo(60, 90);   
    18.     //定義中間點座標3(這是最後一個中間點，也就是終點)
    19.        ctx.lineTo(100, 90);   
    20.     //依照繪圖路徑順序連接各個座標點
    21.        ctx.stroke();   
    22.     //關閉繪製路徑
    23.        ctx.closePath();   
    24. }   
    25.   

    26. 対応する表示効果は次のとおりです:
        

        上記の内容をマスターすると、Canvas を使用して線を描くための基本的な理解が深まったと思います。線幅や透明度などの制御には 1 つの属性を設定するだけでよいため、上記の関連する API を参照してください。ここでは詳細は説明しません。

        重要な注意: グラフィックス パスを描画するときは、必ず最初に beginPath() を呼び出してください。 beginPath() メソッドは、メモリ内の以前の描画パス情報をクリアします。これを行わないと、単一の図形を描画する場合には影響がありませんが、複数の図形 (上の例では 2 本の直線など) を描画する場合、パスの描画などの操作で予期しない結果が生じる可能性があります。または色の塗りつぶし。
        さらに、初心者は closePath() メソッド、特に上記の API 表の closePath() メソッドの説明の赤字部分に少し注意する必要があります。ポリラインを描画する上記のコード例では、最初に stroke() を呼び出し、次に closePath() を呼び出しました。実際、ストローク() メソッドが呼び出されたとき、ポリラインはすでに描画されており、現在の描画パスは閉じられているため、closePath() メソッドが再度呼び出されたとき、現在の描画パスを接続するために直線は使用されません。エンドポイントと開始エンドポイント (つまり、ここでの closePath() はオプションですが、良い習慣を維持するために、これを記述することをお勧めします)。 stopPath() と closePath() の呼び出し順序を入れ替えると、状況はまったく異なります。最初に closePath() が呼び出され、この時点では描画パスは閉じられていないため、closePath() は現在の終点と開始終点を直線で結びます。

        ストローク()とclosePath()の呼び出し順序を入れ替えたサンプルコードは以下の通りです。

        呼び出し順序を交換した後の、対応する表示効果は次のとおりです: