html5 Canvas畫圖教程(5)—canvas里畫曲線之a(chǎn)rc方法_HTML5教程
推薦:使用css創(chuàng)建三角形 使用CSS3創(chuàng)建3d四面體原理及代碼(html5實踐)今天讀了篇關(guān)于如何使用css3創(chuàng)建3d四面體的文章,覺的相當(dāng)不錯,所以拿出來和大家分享一下,如何使用div+css創(chuàng)建三角形。在這里我先把相關(guān)代碼粘貼出來,然后再為大家講解原理
在canvas畫線條這篇文章中,我講了畫直線的方法,按理這篇畫曲線的文章早該發(fā)了,但由于canvas畫曲線比較特殊,我還沒摸透,所以要一步步嘗試。canvas里畫曲線的難點之一,就在于他連曲線的函數(shù)就有4個!分別是arc,arcTo,quadraticCurveTo,bezierCurveTo.我從最簡單的arc方法講起吧。
arc的作用是畫一個正規(guī)的圓弧,可以是一個完整的圓,也可以是一個圓的某一段弧線。
arc的語法如下:
復(fù)制代碼 代碼如下:hl5o.cn
context.arc(x, y, radius, startAngle, endAngle, anticlockwise)
他的參數(shù)我解釋一下,即
arc(圓心x,圓心y,半徑,開始的角度,結(jié)束的角度,是否逆時針)
如果我們用arc畫一個完整的圓,該怎么搞?大家注意到參數(shù)中有個開始角度與結(jié)束角度,如果我們開始角度是0,結(jié)束角度是360,不就是個正圓了?
正解!但要注意的是,這里的角度是用“弧度”來表示的(Flash也是如此),一個完整的圓即360度,就是2PI弧度。
所以我們這么寫:
復(fù)制代碼 代碼如下:hl5o.cn
ctx.arc(400,400,20,0,Math.PI*2);
ctx.fill();
ctx.stroke();
和lineTo一樣,arc也是畫的路徑,所以我們要在他后面調(diào)用填充或描邊的方法才能顯出圖形(圖中采用了紅色的strokeStyle與半透明紅色的fillStyle)。

現(xiàn)在我們來畫一個1/4圓,角度嘛,就是90度。前面說了,360度角即2PI弧度,那么一度角就是2PI/360=PI/180弧度,那么90度就是2PI/360*90=PI/2弧度(其他的角度請自行計算)。
復(fù)制代碼 代碼如下:hl5o.cn
ctx.arc(400,400,20,0,Math.PI*2/4);

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

你會看到,角度變成了逆時針展開,導(dǎo)致弧線變成了360-90=270度。
但是!大家要注意一點,就是起點與終點的計算方式,始終是以0度為起點,并順時針延伸的,不存在順反的說法。順反時針只是弧線的繪制方向。
這樣不僅僅可以防止順來逆去的容易混淆,而且更方便計算。
不過,靈活的使用逆時針,有時候很有用。
上面的例子,我們的起點角度都是0,現(xiàn)在我們試試其他的起點角度吧,比如90度。
復(fù)制代碼 代碼如下:hl5o.cn
ctx.arc(400,400,20,Math.PI*2/4,Math.PI*2+Math.PI);
如果我們起點是90度而終點也是90度,那結(jié)果就是什么都不得畫,所以我把終點角度改成了180度,最后得到下圖的圖形。

復(fù)制代碼 代碼如下:hl5o.cn
ctx.arc(400,400,20,Math.PI*2/4,Math.PI*2+Math.PI*2/4); //起點90度,終點360+90度
不過這種做法純屬沒事找事,正常人是不會用的。
總結(jié):Canvas的arc方法是畫正圓弧線的辦法,也只能畫正弧線,沒法畫其他奇怪的弧線,比如S形——雖然我最喜歡S形了。
分享:html5指南-1.html5全局屬性(html5 global attributes)深入理解一個元素可以定義自己的屬性,比如a標(biāo)簽定義href屬性,這種叫局部屬性(local attribute)。相對應(yīng)的我們可以通過全局屬性(global attribute)為所有元素設(shè)置共有的行為,當(dāng)然你也可以為單獨元素設(shè)置全局屬性,只是這樣做沒有太大的意義
相關(guān)HTML5教程:
- 只要五步 就可以用HTML5/CSS3快速制作便簽貼特效(圖)
- 網(wǎng)易微博Web App用HTML5開發(fā)的過程介紹
- HTML5 對各個標(biāo)簽的定義與規(guī)定:body的介紹
- 關(guān)于HTML5的安全問題開發(fā)人員需要牢記的
- 關(guān)于HTML5的22個初級技巧(圖文教程)
- 開發(fā)人員所需要知道的HTML5性能分析面面觀
- HTML5 Web Database 數(shù)據(jù)庫的SQL語句的使用方法
- HTML5實踐-圖片設(shè)置成灰度圖
- HTML5安全介紹之內(nèi)容安全策略(CSP)簡介
- HTML5 Web存儲方式的localStorage和sessionStorage進行數(shù)據(jù)本地存儲案例應(yīng)用
- Bootstrap 學(xué)習(xí)分享
- input元素的url類型和email類型簡介
HTML5教程Rss訂閱Div+Css教程搜索
HTML5教程推薦
- html5 Canvas畫圖教程(11)—使用lineTo/arc/bezierCurveTo畫橢圓形
- 使用css3 屬性如何豐富圖片樣式(圓角 陰影 漸變)
- html5 canvas-1.canvas介紹(hello canvas)
- HTML4和HTML5之間除了相似以外的10個主要不同
- Bootstrap 學(xué)習(xí)分享
- HTML5教程之html 5 本地數(shù)據(jù)庫(Web Sql Database)
- html5 Canvas畫圖教程(9)—canvas中畫出矩形和圓形
- 關(guān)于HTML5的22個初級技巧(圖文教程)
- 網(wǎng)易微博Web App用HTML5開發(fā)的過程介紹
- 使用css創(chuàng)建三角形 使用CSS3創(chuàng)建3d四面體原理及代碼(html5實踐)
- 相關(guān)鏈接:
- 教程說明:
HTML5教程-html5 Canvas畫圖教程(5)—canvas里畫曲線之a(chǎn)rc方法
。