來(lái)源于：
https://www.jb51.net/html5/439875.html
理論部分:
在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à)筆.
我們可以使用Canvas對(duì)象的getContext()方法來(lái)獲取CanvasRenderingContext2D對(duì)象。比較細(xì)心的讀者應(yīng)該注意到了：getContext()方法需要傳入一個(gè)字符串——2d，獲取到的CanvasRenderingContext2D對(duì)象的名稱(chēng)中也帶有2D。這是因?yàn)椋壳癶tml5只支持2D繪圖，但是在未來(lái)的html5中也可能支持3D或其他形式的繪圖。屆時(shí)，我們可能就需要使用getContext(“3d”)來(lái)獲取CanvasRenderingContext3D對(duì)象并繪制3D圖形了。
使用html5 canvas繪制線條(直線、折線等)
使用html5 Canvas繪制直線所需的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定義繪制線條的寬度。默認(rèn)值是1.0，并且這個(gè)屬性必須大于0.0。較寬的線條在路徑上居中，每邊各有線條寬的一半。lineCap指定線條兩端的線帽如何繪制。合法的值是 “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)使用直線連接當(dāng)前端點(diǎn)和指定的坐標(biāo)點(diǎn)
(x,y) - stroke(int x, int y)沿著繪制路徑的坐標(biāo)點(diǎn)順序繪制直線
- closePath()如果當(dāng)前的繪制路徑是打開(kāi)的，則關(guān)閉掉該繪制路徑。此外，調(diào)用該方法時(shí)，它會(huì)嘗試用直線連接當(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后，那么繪制線條就顯得非常簡(jiǎn)單了。
畫(huà)一條藍(lán)色的直線
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5 Canvas繪制線條入門(mén)示例</title>
</head>
<body>
<!-- 添加canvas標(biāo)簽，并加上紅色邊框以便于在頁(yè)面上查看 -->
<canvas id="myCanvas" width="400px" height="300px" style="border: 1px solid red;">
您的瀏覽器不支持canvas標(biāo)簽。
</canvas>
<script type="text/javascript">
//獲取Canvas對(duì)象(畫(huà)布)
var canvas = document.getElementById("myCanvas");
//簡(jiǎn)單地檢測(cè)當(dāng)前瀏覽器是否支持Canvas對(duì)象，以免在一些不支持html5的瀏覽器中提示語(yǔ)法錯(cuò)誤
if(canvas.getContext){
//獲取對(duì)應(yīng)的CanvasRenderingContext2D對(duì)象(畫(huà)筆)
var ctx = canvas.getContext("2d");
//注意，Canvas的坐標(biāo)系是：Canvas畫(huà)布的左上角為原點(diǎn)(0,0)，向右為橫坐標(biāo)，向下為縱坐標(biāo)，單位是像素(px)。
//開(kāi)始一個(gè)新的繪制路徑
ctx.beginPath();
//定義直線的起點(diǎn)坐標(biāo)為(10,10)
ctx.moveTo(10, 10);
//定義直線的終點(diǎn)坐標(biāo)為(50,10)
ctx.lineTo(50, 50);
//定義直線的顏色
ctx.strokeStyle = "blue";
//沿著坐標(biāo)點(diǎn)順序的路徑繪制直線
ctx.stroke();
//關(guān)閉當(dāng)前的繪制路徑
ctx.closePath();
}
</script>
</body>
</html>
畫(huà)一條藍(lán)色的折線：
//開(kāi)始一個(gè)新的繪制路徑
ctx.beginPath();
//定義直線的起點(diǎn)坐標(biāo)為(10,10)
ctx.moveTo(10, 10);
//定義中間點(diǎn)坐標(biāo)1
ctx.lineTo(100,35);
//定義中間點(diǎn)坐標(biāo)2
ctx.lineTo(50,100);
//定義直線的終點(diǎn)坐標(biāo)為(50,50)
ctx.lineTo(50, 50);
//定義直線的顏色
ctx.strokeStyle = "blue";
//沿著坐標(biāo)點(diǎn)順序的路徑繪制直線
ctx.stroke();
//關(guān)閉當(dāng)前的繪制路徑
ctx.closePath();
補(bǔ)充
掌握上述內(nèi)容后，相信大家對(duì)使用Canvas繪制線條有一些基本的了解了吧。由于對(duì)線條的寬度、透明度等控制只是設(shè)置單個(gè)屬性即可，請(qǐng)參考上面的相關(guān)API，這里就不再贅述了。
強(qiáng)烈注意：在繪制圖形路徑時(shí)，一定要先調(diào)用beginPath()。beginPath()方法將會(huì)清空內(nèi)存中之前的繪制路徑信息。如果不這樣做，對(duì)于繪制單個(gè)圖形可能沒(méi)什么影響，但是在繪制多個(gè)圖形時(shí)(例如上面示例的兩條直線)，將會(huì)導(dǎo)致路徑繪制或者顏色填充等操作出現(xiàn)任何意料之外的結(jié)果。
此外，對(duì)于closePath()方法，初學(xué)者一定要稍加注意，尤其是上面API表格中closePath()方法描述中的紅色文字。在上面繪制折線的代碼示例中，我們先調(diào)用了stroke()，再調(diào)用了closePath()。其實(shí)在調(diào)用stroke()方法時(shí)，折線就已經(jīng)繪制好了，當(dāng)前的繪制路徑也就被關(guān)閉掉了，所以再調(diào)用closePath()方法時(shí)，它就不會(huì)使用直線連接當(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ì)用直線連接當(dāng)前端點(diǎn)和起始端點(diǎn)。
交換stroke()和closePath()調(diào)用順序后的示例代碼如下：
交換調(diào)用順序后，對(duì)應(yīng)的顯示效果如下：
