主頁 > 知識(shí)庫 > html5 Canvas畫圖教程(5)—canvas里畫曲線之a(chǎn)rc方法

html5 Canvas畫圖教程(5)—canvas里畫曲線之a(chǎn)rc方法

熱門標(biāo)簽:會(huì)聲會(huì)影怎樣做地圖標(biāo)注效果 洛陽市伊川縣地圖標(biāo)注中心官網(wǎng) 搜狗星級(jí)酒店地圖標(biāo)注 江蘇高頻外呼系統(tǒng)線路 電銷機(jī)器人視頻 地圖標(biāo)注自己去過的地方 平頂山電子地圖標(biāo)注怎么修改 標(biāo)準(zhǔn)智能外呼系統(tǒng) 高德地圖標(biāo)注錯(cuò)誤怎么修改
在canvas畫線條這篇文章中,我講了畫直線的方法,按理這篇畫曲線的文章早該發(fā)了,但由于canvas畫曲線比較特殊,我還沒摸透,所以要一步步嘗試。
canvas里畫曲線的難點(diǎn)之一,就在于他連曲線的函數(shù)就有4個(gè)!分別是arc,arcTo,quadraticCurveTo,bezierCurveTo.我從最簡(jiǎn)單的arc方法講起吧。
arc的作用是畫一個(gè)正規(guī)的圓弧,可以是一個(gè)完整的圓,也可以是一個(gè)圓的某一段弧線。

arc的語法如下

復(fù)制代碼
代碼如下:

context.arc(x, y, radius, startAngle, endAngle, anticlockwise)

他的參數(shù)我解釋一下,即
arc(圓心x,圓心y,半徑,開始的角度,結(jié)束的角度,是否逆時(shí)針)
如果我們用arc畫一個(gè)完整的圓,該怎么搞?大家注意到參數(shù)中有個(gè)開始角度與結(jié)束角度,如果我們開始角度是0,結(jié)束角度是360,不就是個(gè)正圓了?
正解!但要注意的是,這里的角度是用“弧度”來表示的(Flash也是如此),一個(gè)完整的圓即360度,就是2PI弧度。

所以我們這么寫

復(fù)制代碼
代碼如下:

ctx.arc(400,400,20,0,Math.PI*2);
ctx.fill();
ctx.stroke();

和lineTo一樣,arc也是畫的路徑,所以我們要在他后面調(diào)用填充或描邊的方法才能顯出圖形(圖中采用了紅色的strokeStyle與半透明紅色的fillStyle)。


現(xiàn)在我們來畫一個(gè)1/4圓,角度嘛,就是90度。前面說了,360度角即2PI弧度,那么一度角就是2PI/360=PI/180弧度,那么90度就是2PI/360*90=PI/2弧度(其他的角度請(qǐng)自行計(jì)算)。

復(fù)制代碼
代碼如下:

ctx.arc(400,400,20,0,Math.PI*2/4);


 
由圖我們可以確定arc的0度就是數(shù)學(xué)上常用的0度,但是角度默認(rèn)是順時(shí)針張開的,與數(shù)學(xué)模型相反(跟坐標(biāo)有關(guān),因?yàn)閏anvas坐標(biāo)也與數(shù)學(xué)坐標(biāo)相反)。
不過前面不是有個(gè)參數(shù)是確定是否逆時(shí)針嗎?我們把他設(shè)為true如何?

復(fù)制代碼
代碼如下:

ctx.arc(400,400,20,0,Math.PI*2/4,true);


 
你會(huì)看到,角度變成了逆時(shí)針展開,導(dǎo)致弧線變成了360-90=270度。
但是!大家要注意一點(diǎn),就是起點(diǎn)與終點(diǎn)的計(jì)算方式,始終是以0度為起點(diǎn),并順時(shí)針延伸的,不存在順反的說法。順反時(shí)針只是弧線的繪制方向。
這樣不僅僅可以防止順來逆去的容易混淆,而且更方便計(jì)算。
不過,靈活的使用逆時(shí)針,有時(shí)候很有用。
上面的例子,我們的起點(diǎn)角度都是0,現(xiàn)在我們?cè)囋嚻渌钠瘘c(diǎn)角度吧,比如90度。

復(fù)制代碼
代碼如下:

ctx.arc(400,400,20,Math.PI*2/4,Math.PI*2+Math.PI);

如果我們起點(diǎn)是90度而終點(diǎn)也是90度,那結(jié)果就是什么都不得畫,所以我把終點(diǎn)角度改成了180度,最后得到下圖的圖形。

問題:如果我們從非0度起點(diǎn)來畫一個(gè)完整的圓,行不行?當(dāng)然也可以,只要你把弧線的終點(diǎn)設(shè)置為360度+起點(diǎn)角度,如:

復(fù)制代碼
代碼如下:

ctx.arc(400,400,20,Math.PI*2/4,Math.PI*2+Math.PI*2/4); //起點(diǎn)90度,終點(diǎn)360+90度

不過這種做法純屬?zèng)]事找事,正常人是不會(huì)用的。
總結(jié):Canvas的arc方法是畫正圓弧線的辦法,也只能畫正弧線,沒法畫其他奇怪的弧線,比如S形——雖然我最喜歡S形了。

標(biāo)簽:果洛 阿克蘇 廣西 鄂爾多斯 松原 廣東 常德 蚌埠

巨人網(wǎng)絡(luò)通訊聲明:本文標(biāo)題《html5 Canvas畫圖教程(5)—canvas里畫曲線之a(chǎn)rc方法》,本文關(guān)鍵詞  html5,Canvas,畫圖,教程,canvas,;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題,煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們,我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無關(guān)。
  • 相關(guān)文章
  • 下面列出與本文章《html5 Canvas畫圖教程(5)—canvas里畫曲線之a(chǎn)rc方法》相關(guān)的同類信息!
  • 本頁收集關(guān)于html5 Canvas畫圖教程(5)—canvas里畫曲線之a(chǎn)rc方法的相關(guān)信息資訊供網(wǎng)民參考!
  • 推薦文章