來源于：
https://www.jb51.net/html5/439875.html
理論部分:
在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對象就相當于這支畫筆.
我們可以使用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后，那么繪制線條就顯得非常簡單了。
畫一條藍色的直線
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5 Canvas繪制線條入門示例</title>
</head>
<body>
<!-- 添加canvas標簽，并加上紅色邊框以便于在頁面上查看 -->
<canvas id="myCanvas" width="400px" height="300px" style="border: 1px solid red;">
您的瀏覽器不支持canvas標簽。
</canvas>
<script type="text/javascript">
//獲取Canvas對象(畫布)
var canvas = document.getElementById("myCanvas");
//簡單地檢測當前瀏覽器是否支持Canvas對象，以免在一些不支持html5的瀏覽器中提示語法錯誤
if(canvas.getContext){
//獲取對應的CanvasRenderingContext2D對象(畫筆)
var ctx = canvas.getContext("2d");
//注意，Canvas的坐標系是：Canvas畫布的左上角為原點(0,0)，向右為橫坐標，向下為縱坐標，單位是像素(px)。
//開始一個新的繪制路徑
ctx.beginPath();
//定義直線的起點坐標為(10,10)
ctx.moveTo(10, 10);
//定義直線的終點坐標為(50,10)
ctx.lineTo(50, 50);
//定義直線的顏色
ctx.strokeStyle = "blue";
//沿著坐標點順序的路徑繪制直線
ctx.stroke();
//關閉當前的繪制路徑
ctx.closePath();
}
</script>
</body>
</html>
畫一條藍色的折線：
//開始一個新的繪制路徑
ctx.beginPath();
//定義直線的起點坐標為(10,10)
ctx.moveTo(10, 10);
//定義中間點坐標1
ctx.lineTo(100,35);
//定義中間點坐標2
ctx.lineTo(50,100);
//定義直線的終點坐標為(50,50)
ctx.lineTo(50, 50);
//定義直線的顏色
ctx.strokeStyle = "blue";
//沿著坐標點順序的路徑繪制直線
ctx.stroke();
//關閉當前的繪制路徑
ctx.closePath();
補充
掌握上述內容后，相信大家對使用Canvas繪制線條有一些基本的了解了吧。由于對線條的寬度、透明度等控制只是設置單個屬性即可，請參考上面的相關API，這里就不再贅述了。
強烈注意：在繪制圖形路徑時，一定要先調用beginPath()。beginPath()方法將會清空內存中之前的繪制路徑信息。如果不這樣做，對于繪制單個圖形可能沒什么影響，但是在繪制多個圖形時(例如上面示例的兩條直線)，將會導致路徑繪制或者顏色填充等操作出現任何意料之外的結果。
此外，對于closePath()方法，初學者一定要稍加注意，尤其是上面API表格中closePath()方法描述中的紅色文字。在上面繪制折線的代碼示例中，我們先調用了stroke()，再調用了closePath()。其實在調用stroke()方法時，折線就已經繪制好了，當前的繪制路徑也就被關閉掉了，所以再調用closePath()方法時，它就不會使用直線連接當前端點和起始端點(也就是說，這里的closePath()是可有可無的，不過為了保持良好的習慣，還是建議寫上)。如果我們交換一下stroke()和closePath()的調用順序，則情況完全不一樣了。由于closePath()先調用，此時繪制路徑并沒有關閉，那么closePath()將會用直線連接當前端點和起始端點。
交換stroke()和closePath()調用順序后的示例代碼如下：
交換調用順序后，對應的顯示效果如下：
