HTML5畫(huà)布中怎樣繪制線(xiàn)？

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

圖1 線(xiàn)的組成

對(duì)圖1線(xiàn)的各部分組成解釋如下。

1. 初始位置

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

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

在畫(huà)布中使用moveTo(x,y)方法來(lái)定義初始位置，其中x和y代表水平坐標(biāo)軸和垂直坐標(biāo)軸的位置，中間用“,”隔開(kāi)。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)到當(dāng)前點(diǎn)，并不會(huì)繪制線(xiàn)。

2. 連線(xiàn)端點(diǎn)

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

context.lineTo(100,100);

3. 描邊

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

context.stroke();




猜你喜歡：

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

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

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

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