濮阳杆衣贸易有限公司

主頁(yè) > 知識(shí)庫(kù) > 使用HTML5 Canvas繪制直線(xiàn)或折線(xiàn)等線(xiàn)條的方法講解

使用HTML5 Canvas繪制直線(xiàn)或折線(xiàn)等線(xiàn)條的方法講解
熱門(mén)標(biāo)簽：跟電銷(xiāo)機(jī)器人做同事 鶴壁手機(jī)自動(dòng)外呼系統(tǒng)怎么安裝 中紳電銷(xiāo)智能機(jī)器人 農(nóng)村住宅地圖標(biāo)注 ai電銷(xiāo)機(jī)器人連接網(wǎng)關(guān) 漳州人工外呼系統(tǒng)排名 濟(jì)南辦理400電話(huà) 鄭州電銷(xiāo)外呼系統(tǒng)違法嗎 威海營(yíng)銷(xiāo)外呼系統(tǒng)招商

HTML5 Canvas基本概念講解
html5，這個(gè)應(yīng)該就不需要多作介紹了，只要是開(kāi)發(fā)人員應(yīng)該都不會(huì)陌生。html5是「新興」的網(wǎng)頁(yè)技術(shù)標(biāo)準(zhǔn)，目前，除IE8及其以下版本的IE瀏覽器之外，幾乎所有主流瀏覽器(FireFox、Chrome、Opera、Safari、IE9+)都已經(jīng)開(kāi)始支持html5了。除此之外，在移動(dòng)瀏覽器市場(chǎng)上，眾多的移動(dòng)瀏覽器也紛紛展開(kāi)關(guān)于「html5的支持能力以及性能表現(xiàn)」的軍備競(jìng)賽。html作為革命性的網(wǎng)頁(yè)技術(shù)標(biāo)準(zhǔn)，再加上眾多瀏覽器廠(chǎng)商或組織的鼎力支持，可以想見(jiàn)，html5將會(huì)成為未來(lái)網(wǎng)頁(yè)技術(shù)的領(lǐng)頭羊。

html5，說(shuō)其是「新興」的，其實(shí)也不算新了。畢竟，html5早在2008年其第一份正式草案就已經(jīng)對(duì)外公布。從2008年算起，到現(xiàn)在也算是有些年頭了。不過(guò)，到目前為止，對(duì)于大多數(shù)開(kāi)發(fā)人員而言，仍然是「雷聲大，雨點(diǎn)小」——聽(tīng)說(shuō)html5的多，實(shí)際使用html5的卻很少。

眾所周知，html5中增加了許多新特性。在html5的眾多特性中，Canvas應(yīng)該算是最引人注目的新特性之一。我們使用html5的Canvas對(duì)象可以直接在瀏覽器的網(wǎng)頁(yè)上繪制圖形。這意味著瀏覽器可以脫離Flash等第三方插件，直接在網(wǎng)頁(yè)上顯示圖形或動(dòng)畫(huà)。

現(xiàn)在，我們就來(lái)為html5初學(xué)者介紹如何使用html5 Canvas繪制基本的圖形。

首先，我們需要準(zhǔn)備如下html基礎(chǔ)代碼：

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta charset="UTF-8">  
  5. <title>HTML5 Canvas入門(mén)示例</title>  
  6. </head>  
  7. <body>  
  8.   
  9. </body>  
  10. </html>  

上述代碼是一個(gè)html5頁(yè)面的基本代碼模板。其中，第一行代碼<!DOCTYPE html>是一個(gè)文檔類(lèi)型標(biāo)簽指令，這也是html5頁(yè)面的標(biāo)準(zhǔn)文檔類(lèi)型指令，用于告訴瀏覽器「這是一個(gè)html5頁(yè)面，請(qǐng)按照html5的網(wǎng)頁(yè)標(biāo)準(zhǔn)來(lái)解析顯示該頁(yè)面」。第4行代碼<meta charset="UTF-8">用于告訴瀏覽器「這個(gè)html5頁(yè)面的字符編碼為UTF-8」，這也是html5網(wǎng)頁(yè)設(shè)置字符編碼的標(biāo)準(zhǔn)寫(xiě)法。這與以往的html字符編碼指令有所不同。

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <!-- 以往的html字符編碼指令如下 -->  
  2. <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">  

現(xiàn)在，我們就在包含上述代碼的html文件中進(jìn)行Canvas繪制圖形的實(shí)例講解。首先，我們?cè)谏鲜鰄tml代碼的body部分添加如下canvas標(biāo)簽。

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta charset="UTF-8">  
  5. <title>HTML5 Canvas入門(mén)示例</title>  
  6. </head>  
  7. <body>  
  8.   
  9. <!-- 添加canvas標(biāo)簽，并加上紅色邊框以便于在頁(yè)面上查看效果 -->  
  10. <canvas id="myCanvas" width="400px" height="300px" style="border: 1px solid red;">  
  11. 您的瀏覽器不支持canvas標(biāo)簽。   
  12. </canvas>  
  13.   
  14. </body>  
  15. </html>  

此時(shí)，我們使用支持html5的瀏覽器打開(kāi)該頁(yè)面，將會(huì)看到如下內(nèi)容：

在html5中，canvas標(biāo)簽本身并沒(méi)有任何行為，僅僅只是在頁(yè)面上占用指定大小的頁(yè)面空白空間。canvas標(biāo)簽就相當(dāng)于一塊空白的畫(huà)布，還需要我們自己使用JavaScript提供的canvas API編寫(xiě)相應(yīng)的代碼從而在這塊畫(huà)布上繪制出我們想要的圖形。

備注：canvas標(biāo)簽體內(nèi)的文字內(nèi)容將會(huì)在不支持html5的瀏覽器中顯示。如上述html代碼所示，如果你的瀏覽器不支持html5的canvas標(biāo)簽，那么將會(huì)在canvas標(biāo)簽處顯示文字「您的瀏覽器不支持canvas標(biāo)簽」。
作為「畫(huà)家」的我們，首先需要熟悉我們手中的畫(huà)筆，也就是JavaScript中的Canvas對(duì)象及其相關(guān)內(nèi)容。

在html5中，一個(gè)canvas標(biāo)簽就對(duì)應(yīng)一個(gè)Canvas對(duì)象，我們?cè)贘avaScript可以使用document.getElementById()等常規(guī)函數(shù)來(lái)獲取該對(duì)象。值得注意的是，在JavaScript中，我們并不是直接操作Canvas對(duì)象，而是通過(guò)Canvas對(duì)象來(lái)獲取對(duì)應(yīng)的圖形繪制上下文對(duì)象CanvasRenderingContext2D，然后我們?cè)倮肅anvasRenderingContext2D對(duì)象自帶的許多繪制圖形的函數(shù)來(lái)繪圖。

這就好像是每一張畫(huà)布都對(duì)應(yīng)一支畫(huà)筆，要想在畫(huà)布上繪畫(huà)，我們就先要拿到對(duì)應(yīng)的畫(huà)筆，然后使用這支畫(huà)筆在畫(huà)布上繪圖。CanvasRenderingContext2D對(duì)象就相當(dāng)于這支畫(huà)筆?，F(xiàn)在，我們就先來(lái)嘗試在JavaScript中拿到這支畫(huà)筆。

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta charset="UTF-8">  
  5. <title>HTML5 Canvas繪制線(xiàn)條入門(mén)示例</title>  
  6. </head>  
  7. <body>  
  8.   
  9. <!-- 添加canvas標(biāo)簽，并加上紅色邊框以便于在頁(yè)面上查看效果 -->  
  10. <canvas id="myCanvas" width="400px" height="300px" style="border: 1px solid red;">  
  11. 您的瀏覽器不支持canvas標(biāo)簽。   
  12. </canvas>  
  13.   
  14. <script type="text/javascript">  
  15. //獲取Canvas對(duì)象(畫(huà)布)   
  16. var canvas = document.getElementById("myCanvas");   
  17.   
  18. //簡(jiǎn)單地檢測(cè)當(dāng)前瀏覽器是否支持Canvas對(duì)象，以免在一些不支持html5的瀏覽器中提示語(yǔ)法錯(cuò)誤   
  19. if(canvas.getContext){   
  20.     //獲取對(duì)應(yīng)的CanvasRenderingContext2D對(duì)象(畫(huà)筆)   
  21.     var ctx = canvas.getContext("2d");   
  22. }   
  23. </script>  
  24. </body>  
  25. </html>  

如上述代碼所示，我們可以使用Canvas對(duì)象的getContext()方法來(lái)獲取CanvasRenderingContext2D對(duì)象。比較細(xì)心的讀者應(yīng)該注意到了：getContext()方法需要傳入一個(gè)字符串——2d，獲取到的CanvasRenderingContext2D對(duì)象的名稱(chēng)中也帶有2D。這是因?yàn)?，目前html5只支持2D繪圖，但是在未來(lái)的html5中也可能支持3D或其他形式的繪圖。屆時(shí)，我們可能就需要使用getContext("3d")來(lái)獲取CanvasRenderingContext3D對(duì)象并繪制3D圖形了。

使用html5 canvas繪制線(xiàn)條(直線(xiàn)、折線(xiàn)等)
使用html5 Canvas繪制直線(xiàn)所需的CanvasRenderingContext2D對(duì)象的主要屬性和方法(有"()"者為方法)如下：

屬性或方法 基本描述
strokeStyle 用于設(shè)置畫(huà)筆繪制路徑的顏色、漸變和模式。該屬性的值可以是一個(gè)表示css顏色值的字符串。如果你的繪制需求比較復(fù)雜，該屬性的值還可以是一個(gè)CanvasGradient對(duì)象或者CanvasPattern對(duì)象
globalAlpha 定義繪制內(nèi)容的透明度，取值在0.0(完全透明)和1.0(完全不透明)之間，默認(rèn)值為1.0。
lineWidth 定義繪制線(xiàn)條的寬度。默認(rèn)值是1.0，并且這個(gè)屬性必須大于0.0。較寬的線(xiàn)條在路徑上居中，每邊各有線(xiàn)條寬的一半。
lineCap 指定線(xiàn)條兩端的線(xiàn)帽如何繪制。合法的值是 "butt"、"round"和"square"。默認(rèn)值是"butt"。
beginPath() 開(kāi)始一個(gè)新的繪制路徑。每次繪制新的路徑之前記得調(diào)用該方法。它將重置內(nèi)存中現(xiàn)有的路徑。
moveTo(int x, int y) 移動(dòng)畫(huà)筆到指定的坐標(biāo)點(diǎn)(x,y)，該點(diǎn)就是新的子路徑的起始點(diǎn)
lineTo(int x, int y) 使用直線(xiàn)連接當(dāng)前端點(diǎn)和指定的坐標(biāo)點(diǎn)(x,y)
stroke(int x, int y) 沿著繪制路徑的坐標(biāo)點(diǎn)順序繪制直線(xiàn)
closePath() 如果當(dāng)前的繪制路徑是打開(kāi)的，則關(guān)閉掉該繪制路徑。此外，調(diào)用該方法時(shí)，它會(huì)嘗試用直線(xiàn)連接當(dāng)前端點(diǎn)與起始端點(diǎn)來(lái)關(guān)閉路徑，但如果圖形已經(jīng)關(guān)閉(比如先調(diào)用了stroke())或者只有一個(gè)點(diǎn)，它會(huì)什么都不做。

在Canvas的圖形繪制過(guò)程中，幾乎都是先按照一定順序先定下幾個(gè)坐標(biāo)點(diǎn)，也就是所謂的繪制路徑，然后再根據(jù)我們的需要將這些坐標(biāo)點(diǎn)用指定的方式連接起來(lái)，就形成了我們所需要的圖形。當(dāng)我們了解了CanvasRenderingContext2D對(duì)象的上述API后，那么繪制線(xiàn)條就顯得非常簡(jiǎn)單了。

使用canvas繪制基本的直線(xiàn)

現(xiàn)在，我們就使用canvas來(lái)繪制最基本的直線(xiàn)。

JavaScript Code復(fù)制內(nèi)容到剪貼板
  1. <!DOCTYPE html>   
  2. <html>   
  3. <head>   
  4. <meta charset="UTF-8">   
  5. <title>HTML5 Canvas繪制線(xiàn)條入門(mén)示例</title>   
  6. </head>   
  7. <body>   
  8.   
  9. <!-- 添加canvas標(biāo)簽，并加上紅色邊框以便于在頁(yè)面上查看 -->   
  10. <canvas id="myCanvas" width="400px" height="300px" style="border: 1px solid red;">   
  11. 您的瀏覽器不支持canvas標(biāo)簽。   
  12. </canvas>   
  13.   
  14. <script type="text/javascript">   
  15. //獲取Canvas對(duì)象(畫(huà)布)   
  16. var canvas = document.getElementById("myCanvas");   
  17. //簡(jiǎn)單地檢測(cè)當(dāng)前瀏覽器是否支持Canvas對(duì)象，以免在一些不支持html5的瀏覽器中提示語(yǔ)法錯(cuò)誤   
  18. if(canvas.getContext){     
  19.     //獲取對(duì)應(yīng)的CanvasRenderingContext2D對(duì)象(畫(huà)筆)   
  20.     var ctx = canvas.getContext("2d");   
  21.        
  22.     //注意，Canvas的坐標(biāo)系是：Canvas畫(huà)布的左上角為原點(diǎn)(0,0)，向右為橫坐標(biāo)，向下為縱坐標(biāo)，單位是像素(px)。   
  23.        
  24.     //開(kāi)始一個(gè)新的繪制路徑   
  25.     ctx.beginPath();   
  26.     //定義直線(xiàn)的起點(diǎn)坐標(biāo)為(10,10)   
  27.     ctx.moveTo(10, 10);   
  28.     //定義直線(xiàn)的終點(diǎn)坐標(biāo)為(50,10)   
  29.     ctx.lineTo(50, 10);   
  30.     //沿著坐標(biāo)點(diǎn)順序的路徑繪制直線(xiàn)   
  31.     ctx.stroke();   
  32.     //關(guān)閉當(dāng)前的繪制路徑   
  33.     ctx.closePath();   
  34. }   
  35. </script>   
  36. </body>   
  37. </html>  

顯示效果如下：

使用canvas繪制帶顏色的直線(xiàn)

大家都知道，在現(xiàn)實(shí)世界中，畫(huà)筆也是多種多樣的，并且具有各種不同的顏色。同樣的，Canvas的畫(huà)筆CanvasRenderingContext2D對(duì)象也同樣可以具有你所需要的各種顏色。在上面的代碼示例中，我們沒(méi)有指定顏色的話(huà)，Canvas的畫(huà)筆就默認(rèn)為最常見(jiàn)的黑色。

現(xiàn)在我們?cè)俅问褂肅anvas的畫(huà)筆繪制一條藍(lán)色的直線(xiàn)(基于頁(yè)面簡(jiǎn)潔考慮，下面只給出關(guān)鍵的JavaScript代碼，請(qǐng)同時(shí)參考上面完整的代碼示例)。

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta charset="UTF-8">  
  5. <title>HTML5 Canvas繪制線(xiàn)條入門(mén)示例</title>  
  6. </head>  
  7. <body>  
  8.   
  9. <!-- 添加canvas標(biāo)簽，并加上紅色邊框以便于在頁(yè)面上查看 -->  
  10. <canvas id="myCanvas" width="400px" height="300px" style="border: 1px solid red;">  
  11. 您的瀏覽器不支持canvas標(biāo)簽。   
  12. </canvas>  
  13.   
  14. <script type="text/javascript">  
  15. //獲取Canvas對(duì)象(畫(huà)布)   
  16. var canvas = document.getElementById("myCanvas");   
  17. //簡(jiǎn)單地檢測(cè)當(dāng)前瀏覽器是否支持Canvas對(duì)象，以免在一些不支持html5的瀏覽器中提示語(yǔ)法錯(cuò)誤   
  18. if(canvas.getContext){     
  19.     //獲取對(duì)應(yīng)的CanvasRenderingContext2D對(duì)象(畫(huà)筆)   
  20.     var ctx = canvas.getContext("2d");     
  21.        
  22.     //開(kāi)始一個(gè)新的繪制路徑   
  23.     ctx.beginPath();   
  24.     //定義直線(xiàn)的起點(diǎn)坐標(biāo)為(10,10)   
  25.     ctx.moveTo(10, 10);   
  26.     //定義直線(xiàn)的終點(diǎn)坐標(biāo)為(50,10)   
  27.     ctx.lineTo(50, 10);   
  28.     //沿著坐標(biāo)點(diǎn)順序的路徑繪制直線(xiàn)   
  29.     ctx.stroke();   
  30.     //關(guān)閉當(dāng)前的繪制路徑   
  31.     ctx.closePath();   
  32.   
  33.     //繪制一條帶顏色的直線(xiàn)   
  34.     ctx.moveTo(10, 30);   
  35.     ctx.lineTo(50, 30);   
  36.     //支持css顏色值的各種表現(xiàn)形式，例如："blue"、"#0000ff"、"#00f"、"rgb(0,0,255)"、"rgba(0,0,255,1)"   
  37.     //顏色等各種設(shè)置，必須在最終的繪制函數(shù)stroke()之前調(diào)用   
  38.     ctx.strokeStyle = "blue";    
  39.     ctx.stroke();   
  40.     //關(guān)閉當(dāng)前的繪制路徑   
  41.     ctx.closePath();   
  42. }   
  43. </script>  
  44. </body>  
  45. </html>  

對(duì)應(yīng)的顯示效果如下圖：

使用canvas繪制基本的折線(xiàn)

當(dāng)我們掌握了Canvas繪制直線(xiàn)之后，繪制折線(xiàn)等其他形式的線(xiàn)條就簡(jiǎn)單多了。我們只需要多繪制幾個(gè)路徑中間點(diǎn)，并依次將它們連接起來(lái)即可。

JavaScript Code復(fù)制內(nèi)容到剪貼板
  1. <script type="text/javascript">   
  2. //獲取Canvas對(duì)象(畫(huà)布)   
  3. var canvas = document.getElementById("myCanvas");   
  4. //簡(jiǎn)單地檢測(cè)當(dāng)前瀏覽器是否支持Canvas對(duì)象，以免在一些不支持html5的瀏覽器中提示語(yǔ)法錯(cuò)誤   
  5. if(canvas.getContext){     
  6.     //獲取對(duì)應(yīng)的CanvasRenderingContext2D對(duì)象(畫(huà)筆)   
  7.     var ctx = canvas.getContext("2d");     
  8.        
  9.     //開(kāi)始一個(gè)新的繪制路徑   
  10.     ctx.beginPath();   
  11.     //設(shè)置線(xiàn)條顏色為藍(lán)色   
  12.     ctx.strokeStyle = "blue";   
  13.     //設(shè)置路徑起點(diǎn)坐標(biāo)   
  14.     ctx.moveTo(20, 50);   
  15.     //定義中間點(diǎn)坐標(biāo)1   
  16.     ctx.lineTo(60, 50);   
  17.     //定義中間點(diǎn)坐標(biāo)2   
  18.     ctx.lineTo(60, 90);   
  19.     //定義中間點(diǎn)坐標(biāo)3(這是最后一個(gè)中間點(diǎn)，也就是終點(diǎn))   
  20.     ctx.lineTo(100, 90);   
  21.     //按照繪制路徑順序連接各個(gè)坐標(biāo)點(diǎn)   
  22.     ctx.stroke();   
  23.     //關(guān)閉繪制路徑   
  24.     ctx.closePath();   
  25. }   
  26. </script>  

對(duì)應(yīng)的顯示效果如下圖：

掌握上述內(nèi)容后，相信大家對(duì)使用Canvas繪制線(xiàn)條有一些基本的了解了吧。由于對(duì)線(xiàn)條的寬度、透明度等控制只是設(shè)置單個(gè)屬性即可，請(qǐng)參考上面的相關(guān)API，這里就不再贅述了。

強(qiáng)烈注意：在繪制圖形路徑時(shí)，一定要先調(diào)用beginPath()。beginPath()方法將會(huì)清空內(nèi)存中之前的繪制路徑信息。如果不這樣做，對(duì)于繪制單個(gè)圖形可能沒(méi)什么影響，但是在繪制多個(gè)圖形時(shí)(例如上面示例的兩條直線(xiàn))，將會(huì)導(dǎo)致路徑繪制或者顏色填充等操作出現(xiàn)任何意料之外的結(jié)果。
此外，對(duì)于closePath()方法，初學(xué)者一定要稍加注意，尤其是上面API表格中closePath()方法描述中的紅色文字。在上面繪制折線(xiàn)的代碼示例中，我們先調(diào)用了stroke()，再調(diào)用了closePath()。其實(shí)在調(diào)用stroke()方法時(shí)，折線(xiàn)就已經(jīng)繪制好了，當(dāng)前的繪制路徑也就被關(guān)閉掉了，所以再調(diào)用closePath()方法時(shí)，它就不會(huì)使用直線(xiàn)連接當(dāng)前端點(diǎn)和起始端點(diǎn)(也就是說(shuō)，這里的closePath()是可有可無(wú)的，不過(guò)為了保持良好的習(xí)慣，還是建議寫(xiě)上)。如果我們交換一下stroke()和closePath()的調(diào)用順序，則情況完全不一樣了。由于closePath()先調(diào)用，此時(shí)繪制路徑并沒(méi)有關(guān)閉，那么closePath()將會(huì)用直線(xiàn)連接當(dāng)前端點(diǎn)和起始端點(diǎn)。

交換stroke()和closePath()調(diào)用順序后的示例代碼如下：

交換調(diào)用順序后，對(duì)應(yīng)的顯示效果如下：
 

標(biāo)簽：甘南 紅河 文山 蘇州 惠州 萍鄉(xiāng) 咸陽(yáng) 營(yíng)口

巨人網(wǎng)絡(luò)通訊聲明：本文標(biāo)題《使用HTML5 Canvas繪制直線(xiàn)或折線(xiàn)等線(xiàn)條的方法講解》，本文關(guān)鍵詞  使用,HTML5,Canvas,繪制,直線(xiàn),；如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問(wèn)題，煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們，我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò)，涉及言論、版權(quán)與本站無(wú)關(guān)。
  • 相關(guān)文章
  • 下面列出與本文章《使用HTML5 Canvas繪制直線(xiàn)或折線(xiàn)等線(xiàn)條的方法講解》相關(guān)的同類(lèi)信息！
  • 本頁(yè)收集關(guān)于使用HTML5 Canvas繪制直線(xiàn)或折線(xiàn)等線(xiàn)條的方法講解的相關(guān)信息資訊供網(wǎng)民參考！
    • 推薦文章
    拉孜县| 遂平县| 柳林县| 北流市| 铜鼓县| 左云县| 彰化县| 昭苏县| 武定县| 威海市| 开封市| 昌乐县| 监利县| 宜良县| 东方市| 忻州市| 灵丘县| 大渡口区| 如皋市| 左贡县| 陕西省| 湄潭县| 巴青县| 河曲县| 永靖县| 梧州市| 怀宁县| 化州市| 益阳市| 朝阳区| 会昌县| 当雄县| 元阳县| 蕉岭县| 太仓市| 汕尾市| 涿鹿县| 儋州市| 贡嘎县| 武安市| 澜沧|