html5Canvas如何畫出矩形和圓形

這篇文章將為大家詳細(xì)講解有關(guān)html5 Canvas如何畫出矩形和圓形，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

專注于為中小企業(yè)提供網(wǎng)站設(shè)計(jì)制作、成都做網(wǎng)站服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)潛江免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了上千余家企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

canvas畫矩形
1，fillRect與strokeRect
fillRect可以直接填充出一個(gè)矩形，填充樣式是你當(dāng)前設(shè)置的樣式；同理strokeRect就是直接描邊一個(gè)矩形
他們的參數(shù)是一致的，依次是（起點(diǎn)x坐標(biāo),起點(diǎn)y,矩形的寬，矩形的高）。這里的起點(diǎn)，注意，是指矩形的左上角那個(gè)點(diǎn)。
我們通常用他們來做簡單的事，他們也只能做簡單的事。為什么？因?yàn)樗麄儺嫷膱D形沒有“路徑”的說法，直接就出來了。
比如你先用fillRect填充了一個(gè)矩形，然后你想把這個(gè)矩形描邊，如果你使用stroke()，則不會(huì)有效果，因?yàn)榇藭r(shí)雖然有個(gè)矩形，但并不存在路徑。
如果你迫切的想把這個(gè)矩形描邊，你可以在同樣的位置使用strokeRect()來描邊一個(gè)矩形——但他們其實(shí)是獨(dú)立的，只是位置重疊罷了。

代碼如下:

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

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

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

代碼如下:

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

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

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

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

代碼如下:

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

這個(gè)arc和rect一樣，畫出的也是路徑，填充或描邊需要后續(xù)完成。
但要注意的是，圓形的位置判斷和矩形是不一樣的。我們以矩形的左上角為起點(diǎn)確定他的位置，但圓形的位置我們通常用圓心來確定。
如果你想畫一組水平和垂直都居中的矩形與圓形，那你可要記得不要把矩形的起點(diǎn)當(dāng)成了畫圓形的起點(diǎn)——圓形的起點(diǎn)可是圓心哈！
 
算了，我還是給你一個(gè)現(xiàn)在的公式吧，對(duì)齊的圓與矩形，圓心的坐標(biāo)=矩形的坐標(biāo)+矩形的一半寬高。
也就是圓心x=矩形x+矩形寬/2,圓形y=矩形y+矩形高/2。這樣他們就是絕對(duì)對(duì)齊了的。
雖然arc沒有直接畫圓的方法那么好用——我設(shè)想的直接畫圓的方法只需要3個(gè)參數(shù)，即圓心坐標(biāo)即半徑——但arc不止可以畫圓，還可以畫半圓什么的，所以功能更強(qiáng)大，用著也將就了。
看完了這篇文章，相信你對(duì)“html5 Canvas如何畫出矩形和圓形”有了一定的了解，如果想了解更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

關(guān)于“html5 Canvas如何畫出矩形和圓形”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。

當(dāng)前名稱：html5Canvas如何畫出矩形和圓形
轉(zhuǎn)載來于：http://muchs.cn/article46/gcioeg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供電子商務(wù)、用戶體驗(yàn)、網(wǎng)站制作、網(wǎng)站改版、品牌網(wǎng)站制作、微信公眾號(hào)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)