這篇文章將為大家詳細講解有關如何用canvas來繪制線條，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
canvas是html5的一個新標簽，<canvas> 標簽只是圖形容器，您必須使用腳本來繪制圖形。
接下來，我們使用canvas來繪制線條。
首先，新建html文件，并在文件中添加canvas標簽，如下所示。
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8"/>
<title>Canvas繪圖與動畫基礎</title></head><body><style>
#canvas{ border: 1px solid #aaa; text-align: center;
}</style><canvas id="canvas" width="1024" height="768">
當用戶瀏覽器不支持Canvas,請更換瀏覽器重試！</canvas></body></html>若瀏覽器不支持canvas標簽，則canvas標簽內的字體會顯示，一般情況下，顯示canvas內的繪畫。
現在，讓我們開始畫一條線。
首先，得到canvas：
var canvas = document.getElementById("canvas");canvas的寬和高一般不在style內設置，可以在canvas和id同一等級內設置，如上面html內所示，或者使用js設置。
canvas.width=1014; canvas.height=768;
下來，得到繪圖的上下文環境
var context = canvas.getContext("2d");
我們一般都是使用context來操作canvas，下來，我們在代碼里具體學習一下：
var context = canvas.getContext("2d");//得到繪圖的上下文環境
context.beginPath();//開始繪制線條，若不使用beginPath，則不能繪制多條線條
context.moveTo(100, 100);//線條開始位置
context.lineTo(700, 700);//線條經過點
context.lineTo(100, 700);
context.lineTo(100, 100);
context.closePath();//結束繪制線條，不是必須的
context.lineWidth = 5;//設置線條寬度
context.strokeStyle = "red";//設置線條顏色
context.stroke();//用于繪制線條
context.beginPath();
context.moveTo(200, 100);
context.lineTo(700, 600);
context.closePath();
context.strokeStyle = "black";
context.stroke();運行上面代碼，得到一個紅色的閉合三角形，和一條黑色實線，如下圖所示：
關于如何用canvas來繪制線條就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
