【W(wǎng)eb前端基礎(chǔ)知識(shí)】如何使用canvas繪制圓形

Canvas是HTML5中新增的元素，專門用來(lái)繪制圖形，相當(dāng)于在頁(yè)面中放了一張“畫布”，可以在里面繪制圖形，但是不是指用鼠標(biāo)畫圖，而是需要用Javascript編寫需要繪制的圖形的腳本。

我們利用canvas可以繪制出下圖：

在繪制上圖之前，我們先來(lái)看下相關(guān)知識(shí)點(diǎn)：

一、 開(kāi)始創(chuàng)建路徑

使用beginPath方法開(kāi)始創(chuàng)建路徑。beginPath() 方法表示開(kāi)始一條路徑，或重置當(dāng)前的路徑。簡(jiǎn)單來(lái)說(shuō)，其實(shí)就是告訴畫布，我要開(kāi)始畫草稿了，請(qǐng)把之前的草稿都清除掉。

這個(gè)方法不設(shè)置參數(shù)，通過(guò)調(diào)用這個(gè)方法開(kāi)始創(chuàng)建路徑，在案例中我們需要循環(huán)繪制圓形，在循環(huán)的幾次創(chuàng)建路徑的過(guò)程中，每次開(kāi)始創(chuàng)建是都要調(diào)用beginPath()。

語(yǔ)法是：

context. beginPath ();

二、 創(chuàng)建圓形路徑

創(chuàng)建圓形路徑的時(shí)候，需要使用圖形上下文對(duì)象的arc()方法，這個(gè)方法的定義是：

arc() 方法創(chuàng)建弧/曲線(用于創(chuàng)建圓或部分圓)。

這個(gè)方法的語(yǔ)法是：

這個(gè)方法使用6個(gè)參數(shù)，

x為圓的中心的 x 坐標(biāo);

y為圓的中心的 y 坐標(biāo);

r為圓的半徑;sAngle為起始角，以弧度計(jì)(弧的圓形的三點(diǎn)鐘位置是 0 度);

eAngle為結(jié)束角，以弧度計(jì);

counterclockwise為規(guī)定應(yīng)該逆時(shí)針還是順時(shí)針繪圖(False = 順時(shí)針，true = 逆時(shí)針)。

arc()方法不僅可以繪制圓形，還可以繪制圓弧形，因此，必須指定起始角和結(jié)束角

三、 關(guān)閉路徑

路徑創(chuàng)建完畢后，使用圖形上下文對(duì)象的closePath()方法關(guān)閉路徑。

closePath() 方法創(chuàng)建從當(dāng)前點(diǎn)到開(kāi)始點(diǎn)的路徑。

語(yǔ)法：

context.closePath();

關(guān)閉路徑后，路徑的創(chuàng)建工作就完成了。但是需要注意的是，這個(gè)時(shí)候只是路徑創(chuàng)建完畢而已，還沒(méi)有真正繪制任何圖形。我們接著來(lái)學(xué)習(xí)如何設(shè)置繪制樣式和填充當(dāng)前路徑。