本文講一下在canvas中畫(huà)出矩形和圓形的辦法，他們屬于基礎(chǔ)圖形。當(dāng)然，基礎(chǔ)圖形本來(lái)不止他們，但在canvas中，只有畫(huà)矩形與圓形不需要用其他方法模擬。

canvas畫(huà)矩形

1，fillRect與strokeRect

fillRect可以直接填充出一個(gè)矩形，填充樣式是你當(dāng)前設(shè)置的樣式；同理strokeRect就是直接描邊一個(gè)矩形

他們的參數(shù)是一致的，依次是（起點(diǎn)x坐標(biāo),起點(diǎn)y,矩形的寬，矩形的高）。這里的起點(diǎn)，注意，是指矩形的左上角那個(gè)點(diǎn)。

我們通常用他們來(lái)做簡(jiǎn)單的事，他們也只能做簡(jiǎn)單的事。為什么？因?yàn)樗麄儺?huà)的圖形沒(méi)有“路徑”的說(shuō)法，直接就出來(lái)了。

比如你先用fillRect填充了一個(gè)矩形，然后你想把這個(gè)矩形描邊，如果你使用stroke()，則不會(huì)有效果，因?yàn)榇藭r(shí)雖然有個(gè)矩形，但并不存在路徑。

如果你迫切的想把這個(gè)矩形描邊，你可以在同樣的位置使用strokeRect()來(lái)描邊一個(gè)矩形——但他們其實(shí)是獨(dú)立的，只是位置重疊罷了。

代碼如下:

ctx.fillRect(200,100,50,40);

ctx.strokeRect(200,100,50,40);

如果我們想要一個(gè)又有填充又有描邊的矩形，那同時(shí)使用fillRect和strokeRect無(wú)疑顯得很累贅。所以這種情況我們通常使用以下方法。

2,rect

rect的參數(shù)與fillRect和strokeRect毫無(wú)差別，不同的是他畫(huà)出的只是路徑，至于描邊或是填充要你后續(xù)自己完成。

代碼如下:

ctx.rect(300,100,50,40);

ctx.stroke()

ctx.fill();

這樣做有什么好處呢？前面的文章我提到過(guò)，填充或描邊會(huì)消耗大量資源，所以我們經(jīng)常（比如循環(huán)）需要一次性繪制幾百條路徑，再來(lái)描邊或填充。此時(shí)使用rect畫(huà)路徑，最后再填充，就避免了fillRect和strokeRec每次都要填充或描邊的問(wèn)題。

3，lineTo

當(dāng)然你也可以像我的畫(huà)線條的教程那樣，用4個(gè)lineTo來(lái)畫(huà)出一個(gè)矩形。但這毫無(wú)必要，具體可查看那篇文章。

Canvas畫(huà)圓形

蒼天無(wú)眼，其實(shí)canvas并沒(méi)有一個(gè)真正的可以直接畫(huà)出圓形的函數(shù)，他畫(huà)的其實(shí)是一個(gè)360度的圓弧，看起來(lái)就是個(gè)圓形了。

canvas畫(huà)圓弧的函數(shù)我們前面講過(guò)了，即arc.我們用他來(lái)畫(huà)一個(gè)圓形：

代碼如下:

ctx.arc(300+25,100+20,20,0,Math.PI*2);

ctx.stroke()

ctx.fill();

這個(gè)arc和rect一樣，畫(huà)出的也是路徑，填充或描邊需要后續(xù)完成。

但要注意的是，圓形的位置判斷和矩形是不一樣的。我們以矩形的左上角為起點(diǎn)確定他的位置，但圓形的位置我們通常用圓心來(lái)確定。

如果你想畫(huà)一組水平和垂直都居中的矩形與圓形，那你可要記得不要把矩形的起點(diǎn)當(dāng)成了畫(huà)圓形的起點(diǎn)——圓形的起點(diǎn)可是圓心哈！

算了，我還是給你一個(gè)現(xiàn)在的公式吧，對(duì)齊的圓與矩形，圓心的坐標(biāo)=矩形的坐標(biāo)+矩形的一半寬高。

也就是圓心x=矩形x+矩形寬/2,圓形y=矩形y+矩形高/2。這樣他們就是絕對(duì)對(duì)齊了的。

雖然arc沒(méi)有直接畫(huà)圓的方法那么好用——我設(shè)想的直接畫(huà)圓的方法只需要3個(gè)參數(shù)，即圓心坐標(biāo)即半徑——但arc不止可以畫(huà)圓，還可以畫(huà)半圓什么的，所以功能更強(qiáng)大，用著也將就了。

既然有圓，那么就應(yīng)該有橢圓，但canvas中連一個(gè)正規(guī)的畫(huà)圓的函數(shù)都沒(méi)有，更別提橢圓了。所以畫(huà)橢圓必須用其他方法模擬，這個(gè)比較復(fù)雜，我留到后面講吧。