主頁 > 知識(shí)庫 > HTML5 Canvas基本線條繪制的實(shí)例教程

HTML5 Canvas基本線條繪制的實(shí)例教程
熱門標(biāo)簽：pageadm實(shí)現(xiàn)地圖標(biāo)注 邢臺(tái)縣地圖標(biāo)注app 外呼線穩(wěn)定線路 外呼系統(tǒng)電話怎么投訴 阜陽企業(yè)外呼系統(tǒng) 南通數(shù)據(jù)外呼系統(tǒng)推廣 申請(qǐng)400電話流程簡(jiǎn)介 地圖標(biāo)注位置能賺錢嗎 呼和浩特外呼電銷系統(tǒng)排名

怎么畫線條？和現(xiàn)實(shí)中畫畫差不多：
1.移動(dòng)畫筆，使畫筆移動(dòng)至繪畫的開始處
2.確定第一筆的停止點(diǎn)
3.規(guī)劃好之后，選擇畫筆（包括畫筆的粗細(xì)和顏色等）
4.確定繪制

因?yàn)镃anvas是基于狀態(tài)的繪制（很重要，后面會(huì)解釋），所以前面幾步都是在確定狀態(tài)，最后一步才會(huì)具體繪制。
1.移動(dòng)畫筆(moveTo())
之前我們獲得了畫筆context，所以以此為例，給出改方法的使用實(shí)例——context.moveTo(100,100)。這句代碼的意思是移動(dòng)畫筆至(100,100)這個(gè)點(diǎn)（單位是px）。記住，這里是以canvas畫布的左上角為笛卡爾坐標(biāo)系的原點(diǎn)，且y軸的正方向向下，x軸的正方向向右。
2.筆畫停點(diǎn)(lineTo())
同理，context.lineTo(600,600)。這句的意思是從上一筆的停止點(diǎn)繪制到(600,600)這里。不過要清楚，這里的moveTo()``lineTo()都只是狀態(tài)而已，是規(guī)劃，是我準(zhǔn)備要畫，還沒有開始畫，只是一個(gè)計(jì)劃而已！
3.選擇畫筆
這里我們暫且只設(shè)置一下畫筆的顏色和粗細(xì)。
context.lineWidth = 5，這句話的意思是設(shè)置畫筆(線條)的粗細(xì)為10px。
context.strokeStyle = "#AA394C"，這句話的意思是設(shè)置畫筆(線條)的顏色為玫紅色。
因?yàn)镃anvas是基于狀態(tài)的繪制，所以我們?cè)谶x擇畫筆粗細(xì)和顏色的同時(shí)，其實(shí)也是選擇了線條的粗細(xì)和顏色。
4.確定繪制
確定繪制只有兩種方法，fill()和stroke()，有點(diǎn)繪畫基礎(chǔ)的應(yīng)該知道，前者是指填充，后者是指描邊。因?yàn)槲覀冎皇抢L制線條，所以只要描邊就可以了。調(diào)用代碼context.stroke()即可。


畫一個(gè)線條
不就一條線段嗎！廢話了這么多！那我們就開始畫吧。

JavaScript Code復(fù)制內(nèi)容到剪貼板
  1. <!DOCTYPE html>   
  2. <html lang="zh">   
  3. <head>   
  4.     <meta charset="UTF-8">   
  5.     <title>從線條開始</title>   
  6. </head>   
  7. <body>   
  8. <div id="canvas-warp">   
  9.     <canvas id="canvas" style="border: 1px solid #aaaaaa; display: block; margin: 50px auto;">   
  10.         你的瀏覽器居然不支持Canvas？！趕快換一個(gè)吧??！   
  11.     </canvas>   
  12. </div>   
  13.   
  14. <script>   
  15.     window.onload = function(){   
  16.         var canvas = document.getElementById("canvas");   
  17.         canvas.width = 800;   
  18.         canvas.height = 600;   
  19.         var context = canvas.getContext("2d");   
  20.   
  21.         context.moveTo(100,100);   
  22.         context.lineTo(600,600);   
  23.         context.lineWidth = 5;   
  24.         context.strokeStyle = "#AA394C";   
  25.         context.stroke();   
  26.     }   
  27. </script>   
  28. </body>   
  29. </html>   
  30.   

運(yùn)行結(jié)果：

(一直有小伙伴問我頁面右下角的熊是什么鬼？哦哦，之前忘解釋了，那個(gè)是我的防偽水??！)
我還標(biāo)注了一個(gè)頁面解析圖，供大家參考。

這里我將原本<canvas>標(biāo)簽中的width和height去掉了，但在JavaScript代碼中設(shè)置了canvas對(duì)象的width和height的屬性。

小結(jié)：要設(shè)置畫布的大小，只有這兩種方法

1.在<canvas>標(biāo)簽中設(shè)置；

2.在JS代碼中設(shè)置canvas的屬性.

怎么樣，是不是非常的酷。接下來我們要加快腳步了，繪制一個(gè)多線條組成的圖形。是不是感覺自己離藝術(shù)家又進(jìn)了一步呢？別看這只是簡(jiǎn)簡(jiǎn)單單的一條線段，這一畫只是我們的一小步，但卻是人類的一大步！

繪制折線
上面我們已經(jīng)成功繪制了一條線段。那么，如果我要繪制有兩個(gè)筆畫甚至是很多筆畫的折線怎么辦呢？
聰明的小伙伴肯定已經(jīng)想到了，這還不簡(jiǎn)單，復(fù)用lineTo()就可以了。下面我就獻(xiàn)丑隨便畫了一條優(yōu)美的折線~

JavaScript Code復(fù)制內(nèi)容到剪貼板
  1. <!DOCTYPE html>   
  2. <html lang="zh">   
  3. <head>   
  4.     <meta charset="UTF-8">   
  5.     <title>繪制折線</title>   
  6. </head>   
  7. <body>   
  8. <div id="canvas-warp">   
  9.     <canvas id="canvas" style="border: 1px solid #aaaaaa; display: block; margin: 50px auto;">   
  10.         你的瀏覽器居然不支持Canvas？！趕快換一個(gè)吧！！   
  11.     </canvas>   
  12. </div>   
  13.   
  14. <script>   
  15.     window.onload = function(){   
  16.         var canvas = document.getElementById("canvas");   
  17.         canvas.width = 800;   
  18.         canvas.height = 600;   
  19.         var context = canvas.getContext("2d");   
  20.   
  21.         context.moveTo(100,100);   
  22.         context.lineTo(300,300);   
  23.         context.lineTo(100,500);   
  24.         context.lineWidth = 5;   
  25.         context.strokeStyle = "#AA394C";   
  26.         context.stroke();   
  27.     }   
  28. </script>   
  29. </body>   
  30. </html>  

運(yùn)行結(jié)果：


繪制多條折線
那同理，我們要繪制多條樣式各不相同的折線怎么辦呢？比如我們?cè)谶@里畫三條折線，分別是紅色、藍(lán)色、黑色。聰明的小伙伴肯定想到了，這還不簡(jiǎn)單，只需要平移一下再改下畫筆顏色就行了。代碼格式都一樣的，復(fù)制就可以了。代碼如下。

JavaScript Code復(fù)制內(nèi)容到剪貼板
  1. <!DOCTYPE html>   
  2. <html lang="zh">   
  3. <head>   
  4.     <meta charset="UTF-8">   
  5.     <title>繪制折線</title>   
  6. </head>   
  7. <body>   
  8. <div id="canvas-warp">   
  9.     <canvas id="canvas" style="border: 1px solid #aaaaaa; display: block; margin: 50px auto;">   
  10.         你的瀏覽器居然不支持Canvas？！趕快換一個(gè)吧?。?  
  11.     </canvas>   
  12. </div>   
  13.   
  14. <script>   
  15.     window.onload = function(){   
  16.         var canvas = document.getElementById("canvas");   
  17.         canvas.width = 800;   
  18.         canvas.height = 600;   
  19.         var context = canvas.getContext("2d");   
  20.   
  21.         context.moveTo(100,100);   
  22.         context.lineTo(300,300);   
  23.         context.lineTo(100,500);   
  24.         context.lineWidth = 5;   
  25.         context.strokeStyle = "red";   
  26.         context.stroke();   
  27.   
  28.         context.moveTo(300,100);   
  29.         context.lineTo(500,300);   
  30.         context.lineTo(300,500);   
  31.         context.lineWidth = 5;   
  32.         context.strokeStyle = "blue";   
  33.         context.stroke();   
  34.   
  35.         context.moveTo(500,100);   
  36.         context.lineTo(700,300);   
  37.         context.lineTo(500,500);   
  38.         context.lineWidth = 5;   
  39.         context.strokeStyle = "black";   
  40.         context.stroke();   
  41.     }   
  42. </script>   
  43. </body>   
  44. </html>  

運(yùn)行結(jié)果：

咦？是不是很奇怪？說好的先紅色，再藍(lán)色，再黑色呢？怎么全是黑色了？其實(shí)，這里的原因是我之前一直強(qiáng)調(diào)的一點(diǎn)——Canvas是基于狀態(tài)的繪制。
什么意思呢？其實(shí)這段代碼每次使用stroke()時(shí)，它都會(huì)把之前設(shè)置的狀態(tài)再繪制一遍。第一次stroke()時(shí)，繪制一條紅色的折線；第二次stroke()時(shí)，會(huì)再重新繪制之前的那條紅色的折線，但是這個(gè)時(shí)候的畫筆已經(jīng)被更換成藍(lán)色的了，所以畫出的折線全是藍(lán)色的。換言之，strokeStyle屬性被覆蓋了。同理，第三次繪制的時(shí)候，畫筆顏色是最后的黑色，所以會(huì)重新繪制三條黑色的折線。所以，這里看到的三條折線，其實(shí)繪制了3次，一共繪制了6條折線。
那么，我想繪制三條折線，難道就沒有辦法了嗎？藝術(shù)家之魂到此為止了么？沒救了么？不，還有辦法。
使用beginPath()開始繪制
為了讓繪制方法不重復(fù)繪制，我們可以在每次繪制之前加上beginPath()，代表下次繪制的起始之處為beginPath()之后的代碼。我們?cè)谌卫L制之前分別加上context.beginPath()。

JavaScript Code復(fù)制內(nèi)容到剪貼板
  1. <!DOCTYPE html>   
  2. <html lang="zh">   
  3. <head>   
  4.     <meta charset="UTF-8">   
  5.     <title>繪制折線</title>   
  6. </head>   
  7. <body>   
  8. <div id="canvas-warp">   
  9.     <canvas id="canvas" style="border: 1px solid #aaaaaa; display: block; margin: 50px auto;">   
  10.         你的瀏覽器居然不支持Canvas？！趕快換一個(gè)吧??！   
  11.     </canvas>   
  12. </div>   
  13.   
  14. <script>   
  15.     window.onload = function(){   
  16.         var canvas = document.getElementById("canvas");   
  17.         canvas.width = 800;   
  18.         canvas.height = 600;   
  19.         var context = canvas.getContext("2d");   
  20.   
  21.         context.beginPath();   
  22.         context.moveTo(100,100);   
  23.         context.lineTo(300,300);   
  24.         context.lineTo(100,500);   
  25.         context.lineWidth = 5;   
  26.         context.strokeStyle = "red";   
  27.         context.stroke();   
  28.   
  29.         context.beginPath();   
  30.         context.moveTo(300,100);   
  31.         context.lineTo(500,300);   
  32.         context.lineTo(300,500);   
  33.         context.lineWidth = 5;   
  34.         context.strokeStyle = "blue";   
  35.         context.stroke();   
  36.   
  37.         context.beginPath();   
  38.         context.moveTo(500,100);   
  39.         context.lineTo(700,300);   
  40.         context.lineTo(500,500);   
  41.         context.lineWidth = 5;   
  42.         context.strokeStyle = "black";   
  43.         context.stroke();   
  44.     }   
  45. </script>   
  46. </body>   
  47. </html>  

可以看到，這里得到了我們預(yù)想的結(jié)果。因?yàn)槭褂昧薭eginPath()，所以這里的繪制過程如我們所想的那樣，只繪制了三次，而且每次只繪制一條折線。beginPath()是繪制設(shè)置狀態(tài)的起始點(diǎn)，它之后代碼設(shè)置的繪制狀態(tài)的作用域結(jié)束于繪制方法stroke()、fill()或者closePath()，至于closePath()之后會(huì)講到。
所以我們每次開始繪制前都務(wù)必要使用beginPath()，為了代碼的完整性，建議大家在每次繪制結(jié)束后使用closePath()。

標(biāo)簽：蚌埠 辛集 內(nèi)蒙古 楊凌 撫順 黃山 鶴崗 德州

巨人網(wǎng)絡(luò)通訊聲明：本文標(biāo)題《HTML5 Canvas基本線條繪制的實(shí)例教程》，本文關(guān)鍵詞  HTML5,Canvas,基本,線條,繪制,；如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題，煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們，我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò)，涉及言論、版權(quán)與本站無關(guān)。
  • 相關(guān)文章
  • 下面列出與本文章《HTML5 Canvas基本線條繪制的實(shí)例教程》相關(guān)的同類信息！
  • 本頁收集關(guān)于HTML5 Canvas基本線條繪制的實(shí)例教程的相關(guān)信息資訊供網(wǎng)民參考！
    • 推薦文章