canvas繪製直線

HTML5 <canvas>元素用於圖形的繪製，該元素只是圖形容器，必須使用javascript腳本繪製圖形
建立一個畫布：
<canvas id="myCanvas" width="200" height="100">您的瀏覽器該升級了</canvas>
默認狀況下，<canvas>元素沒有邊框和內容

繪圖開始首先要獲取繪圖對象
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d")
getContext("2d")對象是內建的HTML5對象，擁有多種繪製路徑、矩形、圓形等方法。

 

canvas繪製直線

moveTo(x,y)定義線條開始座標

lineTo(x,y)定義線條結束座標

也能夠用beginPath()方法來開始一段新的路徑，此時能夠不用moveTo(x,y)直接用lineTo(x,y)

lineWidth屬性定義線條的寬度

strokeStyle屬性定義線條顏色

stroke()繪製線條

注意：lineTo(x,y)能夠定義結束座標，用這個方法關閉路徑會有瑕疵，通常咱們用closePath()方法自動關閉路徑這樣沒有瑕疵

lineTo(x,y)關閉路徑以下圖所示：

closePath(x,y)關閉路徑以下圖所示