HTML5畫布中怎樣繪制線？

線是所有復(fù)雜圖形的組成基礎(chǔ)，想要繪制復(fù)雜的的圖形，首先要從繪制線開始。在繪制線之前首先要了解線的組成。一條最簡單的線由三部分組成，分別為初始位置、連線端點以及描邊，如圖1所示。

圖1 線的組成

對圖1線的各部分組成解釋如下。

1. 初始位置

在繪制圖形時，我們首先需要確定從哪里下“筆”，這個下“筆”的位置就是初始位置。在平面中（2d），初始位置可以通過“x，y”的坐標(biāo)軸來表示。在畫布中從最左上角“0，0”開始，x軸向右增大， y軸向下增大，如圖2所示。

圖2 坐標(biāo)軸示意圖

在畫布中使用moveTo(x,y)方法來定義初始位置，其中x和y代表水平坐標(biāo)軸和垂直坐標(biāo)軸的位置，中間用“,”隔開。x和y的取值為數(shù)字，表示像素值（單位省略），例如下面的示例代碼。

var cas = document.getElementById('cas');

var context = cas.getContext('2d');

context.moveTo(100,100);

在上面的示例代碼中，表示定義的初始位置為橫坐標(biāo)100像素和縱坐標(biāo)100像素的位置。需要注意的是，moveTo(x,y)方法僅表示移動到當(dāng)前點，并不會繪制線。

2. 連線端點

連線端點用于定義一個端點，并繪制一條從該端點到初始位置的連線。在畫布中使用lineTo(x,y)方法來定義連線端點。和初始位置類似，連線端點也需要定義x和y的坐標(biāo)位置。例如下面的示例代碼。

context.lineTo(100,100);

3. 描邊

通過初始位置和連線端點可以繪制一條線，但這條線并不能被看到。這時我們需要為線添加描邊，讓線變得可見。使用畫布中的stroke()方法，可以實現(xiàn)線的可視效果，例如下面的示例代碼。stroke()方法的括號中不需要加入任何內(nèi)容。

context.stroke();




猜你喜歡：

CSS是什么意思？史上最詳細(xì)介紹

HTML5畫布如何設(shè)置線的樣式？

如何在HTML5中嵌入視頻和音頻？    

傳智教育前端培訓(xùn)