DIV CSS 佈局教程網

本文講一下在canvas中畫出矩形和圓形的辦法，他們屬於基礎圖形。當然，基礎圖形本來不止他們，但在canvas中，只有畫矩形與圓形不需要用其他方法模擬。 

canvas畫矩形 
1，fillRect與strokeRect 
fillRect可以直接填充出一個矩形，填充樣式是你當前設置的樣式；同理strokeRect就是直接描邊一個矩形 
他們的參數是一致的，依次是（起點x坐標,起點y,矩形的寬，矩形的高）。這裡的起點，注意，是指矩形的左上角那個點。 
我們通常用他們來做簡單的事，他們也只能做簡單的事。為什麼？因為他們畫的圖形沒有“路徑”的說法，直接就出來了。 
比如你先用fillRect填充了一個矩形，然後你想把這個矩形描邊，如果你使用stroke()，則不會有效果，因為此時雖然有個矩形，但並不存在路徑。 
如果你迫切的想把這個矩形描邊，你可以在同樣的位置使用strokeRect()來描邊一個矩形——但他們其實是獨立的，只是位置重疊罷了。 

復制代碼代碼如下:www.mb5u.com
ctx.fillRect(200,100,50,40); 
ctx.strokeRect(200,100,50,40); 

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

2,rect 
rect的參數與fillRect和strokeRect毫無差別，不同的是他畫出的只是路徑，至於描邊或是填充要你後續自己完成。 

復制代碼代碼如下:www.mb5u.com
ctx.rect(300,100,50,40); 
ctx.stroke() 
ctx.fill(); 

這樣做有什麼好處呢？前面的文章我提到過，填充或描邊會消耗大量資源，所以我們經常（比如循環）需要一次性繪制幾百條路徑，再來描邊或填充。此時使用rect畫路徑，最後再填充，就避免了fillRect和strokeRec每次都要填充或描邊的問題。 

3，lineTo 
當然你也可以像我的畫線條的教程那樣，用4個lineTo來畫出一個矩形。但這毫無必要，具體可查看那篇文章。 

Canvas畫圓形 
蒼天無眼，其實canvas並沒有一個真正的可以直接畫出圓形的函數，他畫的其實是一個360度的圓弧，看起來就是個圓形了。 
canvas畫圓弧的函數我們前面講過了，即arc.我們用他來畫一個圓形： 

復制代碼代碼如下:www.mb5u.com
ctx.arc(300+25,100+20,20,0,Math.PI*2); 
ctx.stroke() 
ctx.fill(); 

這個arc和rect一樣，畫出的也是路徑，填充或描邊需要後續完成。 
但要注意的是，圓形的位置判斷和矩形是不一樣的。我們以矩形的左上角為起點確定他的位置，但圓形的位置我們通常用圓心來確定。 
如果你想畫一組水平和垂直都居中的矩形與圓形，那你可要記得不要把矩形的起點當成了畫圓形的起點——圓形的起點可是圓心哈！ 
 
算了，我還是給你一個現在的公式吧，對齊的圓與矩形，圓心的坐標=矩形的坐標+矩形的一半寬高。 
也就是圓心x=矩形x+矩形寬/2,圓形y=矩形y+矩形高/2。這樣他們就是絕對對齊了的。 
雖然arc沒有直接畫圓的方法那麼好用——我設想的直接畫圓的方法只需要3個參數，即圓心坐標即半徑——但arc不止可以畫圓，還可以畫半圓什麼的，所以功能更強大，用著也將就了。 
既然有圓，那麼就應該有橢圓，但canvas中連一個正規的畫圓的函數都沒有，更別提橢圓了。所以畫橢圓必須用其他方法模擬，這個比較復雜，我留到後面講吧。