html5 Canvas畫(huà)圖教程(5)—canvas里畫(huà)曲線之a(chǎn)rc方法
發(fā)布時(shí)間:2013-01-09 14:10:14 作者:佚名
我要評(píng)論

anvas里畫(huà)曲線的難點(diǎn)之一,就在于他連曲線的函數(shù)就有4個(gè)!分別是arc,arcTo,quadraticCurveTo,bezierCurveTo.我從最簡(jiǎn)單的arc方法講起吧,感興趣的朋友可以了解下哦
在canvas畫(huà)線條這篇文章中,我講了畫(huà)直線的方法,按理這篇畫(huà)曲線的文章早該發(fā)了,但由于canvas畫(huà)曲線比較特殊,我還沒(méi)摸透,所以要一步步嘗試。
canvas里畫(huà)曲線的難點(diǎn)之一,就在于他連曲線的函數(shù)就有4個(gè)!分別是arc,arcTo,quadraticCurveTo,bezierCurveTo.我從最簡(jiǎn)單的arc方法講起吧。
arc的作用是畫(huà)一個(gè)正規(guī)的圓弧,可以是一個(gè)完整的圓,也可以是一個(gè)圓的某一段弧線。
arc的語(yǔ)法如下:
context.arc(x, y, radius, startAngle, endAngle, anticlockwise)
他的參數(shù)我解釋一下,即
arc(圓心x,圓心y,半徑,開(kāi)始的角度,結(jié)束的角度,是否逆時(shí)針)
如果我們用arc畫(huà)一個(gè)完整的圓,該怎么搞?大家注意到參數(shù)中有個(gè)開(kāi)始角度與結(jié)束角度,如果我們開(kāi)始角度是0,結(jié)束角度是360,不就是個(gè)正圓了?
正解!但要注意的是,這里的角度是用“弧度”來(lái)表示的(Flash也是如此),一個(gè)完整的圓即360度,就是2PI弧度。
所以我們這么寫(xiě):
ctx.arc(400,400,20,0,Math.PI*2);
ctx.fill();
ctx.stroke();
和lineTo一樣,arc也是畫(huà)的路徑,所以我們要在他后面調(diào)用填充或描邊的方法才能顯出圖形(圖中采用了紅色的strokeStyle與半透明紅色的fillStyle)。
現(xiàn)在我們來(lái)畫(huà)一個(gè)1/4圓,角度嘛,就是90度。前面說(shuō)了,360度角即2PI弧度,那么一度角就是2PI/360=PI/180弧度,那么90度就是2PI/360*90=PI/2弧度(其他的角度請(qǐng)自行計(jì)算)。
ctx.arc(400,400,20,0,Math.PI*2/4);

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

你會(huì)看到,角度變成了逆時(shí)針展開(kāi),導(dǎo)致弧線變成了360-90=270度。
但是!大家要注意一點(diǎn),就是起點(diǎn)與終點(diǎn)的計(jì)算方式,始終是以0度為起點(diǎn),并順時(shí)針延伸的,不存在順?lè)吹恼f(shuō)法。順?lè)磿r(shí)針只是弧線的繪制方向。
這樣不僅僅可以防止順來(lái)逆去的容易混淆,而且更方便計(jì)算。
不過(guò),靈活的使用逆時(shí)針,有時(shí)候很有用。
上面的例子,我們的起點(diǎn)角度都是0,現(xiàn)在我們?cè)囋嚻渌钠瘘c(diǎn)角度吧,比如90度。
ctx.arc(400,400,20,Math.PI*2/4,Math.PI*2+Math.PI);
如果我們起點(diǎn)是90度而終點(diǎn)也是90度,那結(jié)果就是什么都不得畫(huà),所以我把終點(diǎn)角度改成了180度,最后得到下圖的圖形。
ctx.arc(400,400,20,Math.PI*2/4,Math.PI*2+Math.PI*2/4); //起點(diǎn)90度,終點(diǎn)360+90度
不過(guò)這種做法純屬?zèng)]事找事,正常人是不會(huì)用的。
總結(jié):Canvas的arc方法是畫(huà)正圓弧線的辦法,也只能畫(huà)正弧線,沒(méi)法畫(huà)其他奇怪的弧線,比如S形——雖然我最喜歡S形了。
canvas里畫(huà)曲線的難點(diǎn)之一,就在于他連曲線的函數(shù)就有4個(gè)!分別是arc,arcTo,quadraticCurveTo,bezierCurveTo.我從最簡(jiǎn)單的arc方法講起吧。
arc的作用是畫(huà)一個(gè)正規(guī)的圓弧,可以是一個(gè)完整的圓,也可以是一個(gè)圓的某一段弧線。
arc的語(yǔ)法如下:
復(fù)制代碼
代碼如下:context.arc(x, y, radius, startAngle, endAngle, anticlockwise)
他的參數(shù)我解釋一下,即
arc(圓心x,圓心y,半徑,開(kāi)始的角度,結(jié)束的角度,是否逆時(shí)針)
如果我們用arc畫(huà)一個(gè)完整的圓,該怎么搞?大家注意到參數(shù)中有個(gè)開(kāi)始角度與結(jié)束角度,如果我們開(kāi)始角度是0,結(jié)束角度是360,不就是個(gè)正圓了?
正解!但要注意的是,這里的角度是用“弧度”來(lái)表示的(Flash也是如此),一個(gè)完整的圓即360度,就是2PI弧度。
所以我們這么寫(xiě):
復(fù)制代碼
代碼如下:ctx.arc(400,400,20,0,Math.PI*2);
ctx.fill();
ctx.stroke();
和lineTo一樣,arc也是畫(huà)的路徑,所以我們要在他后面調(diào)用填充或描邊的方法才能顯出圖形(圖中采用了紅色的strokeStyle與半透明紅色的fillStyle)。
現(xiàn)在我們來(lái)畫(huà)一個(gè)1/4圓,角度嘛,就是90度。前面說(shuō)了,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í)針張開(kāi)的,與數(shù)學(xué)模型相反(跟坐標(biāo)有關(guān),因?yàn)閏anvas坐標(biāo)也與數(shù)學(xué)坐標(biāo)相反)。
不過(guò)前面不是有個(gè)參數(shù)是確定是否逆時(shí)針嗎?我們把他設(shè)為true如何?
復(fù)制代碼
代碼如下:ctx.arc(400,400,20,0,Math.PI*2/4,true);

你會(huì)看到,角度變成了逆時(shí)針展開(kāi),導(dǎo)致弧線變成了360-90=270度。
但是!大家要注意一點(diǎn),就是起點(diǎn)與終點(diǎn)的計(jì)算方式,始終是以0度為起點(diǎn),并順時(shí)針延伸的,不存在順?lè)吹恼f(shuō)法。順?lè)磿r(shí)針只是弧線的繪制方向。
這樣不僅僅可以防止順來(lái)逆去的容易混淆,而且更方便計(jì)算。
不過(guò),靈活的使用逆時(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é)果就是什么都不得畫(huà),所以我把終點(diǎn)角度改成了180度,最后得到下圖的圖形。
復(fù)制代碼
代碼如下:ctx.arc(400,400,20,Math.PI*2/4,Math.PI*2+Math.PI*2/4); //起點(diǎn)90度,終點(diǎn)360+90度
不過(guò)這種做法純屬?zèng)]事找事,正常人是不會(huì)用的。
總結(jié):Canvas的arc方法是畫(huà)正圓弧線的辦法,也只能畫(huà)正弧線,沒(méi)法畫(huà)其他奇怪的弧線,比如S形——雖然我最喜歡S形了。
相關(guān)文章
- Microdata作為HTML5新增的一個(gè)特性,它允許開(kāi)發(fā)者在HTML文檔中添加更多的語(yǔ)義信息,以便于搜索引擎和瀏覽器更好地理解頁(yè)面內(nèi)容,本文將探討HTML5中Microdata的使用方法以及2025-04-21
- 在HTML語(yǔ)法中,表格主要通過(guò)< table >、< tr >和< td >3個(gè)標(biāo)簽構(gòu)成,本文通過(guò)實(shí)例代碼講解HTML5表格語(yǔ)法格式,感興趣的朋友一起看看吧2025-04-21
- 這篇文章主要介紹了HTML5中使用媒體查詢和Flexbox進(jìn)行響應(yīng)式布局的方法,簡(jiǎn)要介紹了CSS Grid布局的基礎(chǔ)知識(shí)和如何實(shí)現(xiàn)自動(dòng)換行的網(wǎng)格布局,感興趣的朋友一起看看吧2025-04-21
基于Canvas的Html5多時(shí)區(qū)動(dòng)態(tài)時(shí)鐘實(shí)戰(zhàn)代碼
本文介紹了如何使用Canvas在HTML5上實(shí)現(xiàn)一個(gè)多時(shí)區(qū)動(dòng)態(tài)時(shí)鐘的web展示,通過(guò)Canvas的API,可以繪制出6個(gè)不同城市的時(shí)鐘,并且這些時(shí)鐘可以動(dòng)態(tài)轉(zhuǎn)動(dòng),每個(gè)時(shí)鐘上都會(huì)標(biāo)注出對(duì)應(yīng)的2025-03-11HTML5 data-*自定義數(shù)據(jù)屬性的示例代碼
HTML5的自定義數(shù)據(jù)屬性(data-*)提供了一種標(biāo)準(zhǔn)化的方法在HTML元素上存儲(chǔ)額外信息,可以通過(guò)JavaScript訪問(wèn)、修改和在CSS中使用,文章還介紹了高級(jí)用法,如存儲(chǔ)JSON數(shù)據(jù)、事2025-03-11HTML5中下拉框<select>標(biāo)簽的屬性和樣式詳解
在HTML5中,下拉框(<select>標(biāo)簽)作為表單的重要組成部分,為用戶提供了一個(gè)從預(yù)定義選項(xiàng)中選擇值的方式,本文將深入探討<select>標(biāo)簽的屬性、樣式,并重點(diǎn)介2025-02-27- 本文介紹了HTML5InputDatePicker對(duì)象表示HTML``元素,是HTML5中的新對(duì)象,介紹了日期、周、月份、時(shí)間、日期+時(shí)間、本地日期時(shí)間等不同類型的日期選擇器,感興趣的朋友一起看2025-02-17
- 本文介紹了HTML5中的超鏈接、相對(duì)路徑和圖片的使用方法,超鏈接可以創(chuàng)建指向另一個(gè)文檔或頁(yè)面內(nèi)部書(shū)簽的鏈接,相對(duì)路徑用于在同一服務(wù)器內(nèi)部跳轉(zhuǎn)頁(yè)面,圖片標(biāo)簽用于引入外部圖2025-02-17
- 本文介紹了HTML5超鏈接的創(chuàng)建方法,包括基本語(yǔ)法、創(chuàng)建圖像超鏈接的邊框去除方法以及錨點(diǎn)鏈接的使用,還討論了超鏈接的四種不同狀態(tài)(link、visited、hover、active)的CSS樣2025-02-17
HTML5使用details標(biāo)簽:展開(kāi)/收縮信息
最近看一些技術(shù)網(wǎng)站發(fā)現(xiàn)了details 標(biāo)簽的妙用,這個(gè)不用js即可實(shí)現(xiàn)展開(kāi)/收縮信息,很方便用來(lái)讓用戶先才答案,然后下面點(diǎn)擊再給出答案的效果,這里就為大家簡(jiǎn)單介紹一下,2024-11-03