使用html5 Canvas繪制直線所需的CanvasRenderingContext2D對象的主要屬性和方法(有"()"者為方法)如下：
| 屬性或方法 | 基本描述 |
|---|---|
| strokeStyle | 用於設置畫筆繪制路徑的顏色、漸變和模式。該屬性的值可以是一個表示css顏色值的字符串。如果你的繪制需求比較復雜，該屬性的值還可以是一個CanvasGradient對象或者CanvasPattern對象 |
| globalAlpha | 定義繪制內容的透明度，取值在0.0(完全透明)和1.0(完全不透明)之間，默認值為1.0。 |
| lineWidth | 定義繪制線條的寬度。默認值是1.0，並且這個屬性必須大於0.0。較寬的線條在路徑上居中，每邊各有線條寬的一半。 |
| lineCap | 指定線條兩端的線帽如何繪制。合法的值是 "butt"、"round"和"square"。默認值是"butt"。你可以點擊這里查看lineCap的具體示例，以幫助你更好地理解lineCap。 |
| 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來繪制最基本的直線
<!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, 10); //沿着坐標點順序的路徑繪制直線 ctx.stroke(); //關閉當前的繪制路徑 ctx.closePath(); } </script> </body> </html>