欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

  發(fā)布時間:2013-01-09 14:10:14   作者:佚名   我要評論
anvas里畫曲線的難點之一,就在于他連曲線的函數(shù)就有4個!分別是arc,arcTo,quadraticCurveTo,bezierCurveTo.我從最簡單的arc方法講起吧,感興趣的朋友可以了解下哦
canvas畫線條這篇文章中,我講了畫直線的方法,按理這篇畫曲線的文章早該發(fā)了,但由于canvas畫曲線比較特殊,我還沒摸透,所以要一步步嘗試。
canvas里畫曲線的難點之一,就在于他連曲線的函數(shù)就有4個!分別是arc,arcTo,quadraticCurveTo,bezierCurveTo.我從最簡單的arc方法講起吧。
arc的作用是畫一個正規(guī)的圓弧,可以是一個完整的圓,也可以是一個圓的某一段弧線。

arc的語法如下

復制代碼
代碼如下:

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

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

所以我們這么寫

復制代碼
代碼如下:

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

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


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

復制代碼
代碼如下:

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


 
由圖我們可以確定arc的0度就是數(shù)學上常用的0度,但是角度默認是順時針張開的,與數(shù)學模型相反(跟坐標有關,因為canvas坐標也與數(shù)學坐標相反)。
不過前面不是有個參數(shù)是確定是否逆時針嗎?我們把他設為true如何?

復制代碼
代碼如下:

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


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

復制代碼
代碼如下:

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

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

問題:如果我們從非0度起點來畫一個完整的圓,行不行?當然也可以,只要你把弧線的終點設置為360度+起點角度,如:

復制代碼
代碼如下:

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

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

相關文章

  • HTML5中的Microdata與歷史記錄管理詳解

    Microdata作為HTML5新增的一個特性,它允許開發(fā)者在HTML文檔中添加更多的語義信息,以便于搜索引擎和瀏覽器更好地理解頁面內容,本文將探討HTML5中Microdata的使用方法以及
    2025-04-21
  • HTML5表格語法格式詳解

    在HTML語法中,表格主要通過< table >、< tr >和< td >3個標簽構成,本文通過實例代碼講解HTML5表格語法格式,感興趣的朋友一起看看吧
    2025-04-21
  • html5的響應式布局的方法示例詳解

    這篇文章主要介紹了HTML5中使用媒體查詢和Flexbox進行響應式布局的方法,簡要介紹了CSS Grid布局的基礎知識和如何實現(xiàn)自動換行的網(wǎng)格布局,感興趣的朋友一起看看吧
    2025-04-21
  • 基于Canvas的Html5多時區(qū)動態(tài)時鐘實戰(zhàn)代碼

    本文介紹了如何使用Canvas在HTML5上實現(xiàn)一個多時區(qū)動態(tài)時鐘的web展示,通過Canvas的API,可以繪制出6個不同城市的時鐘,并且這些時鐘可以動態(tài)轉動,每個時鐘上都會標注出對應的
    2025-03-11
  • HTML5 data-*自定義數(shù)據(jù)屬性的示例代碼

    HTML5的自定義數(shù)據(jù)屬性(data-*)提供了一種標準化的方法在HTML元素上存儲額外信息,可以通過JavaScript訪問、修改和在CSS中使用,文章還介紹了高級用法,如存儲JSON數(shù)據(jù)、事
    2025-03-11
  • HTML5中下拉框<select>標簽的屬性和樣式詳解

    在HTML5中,下拉框(<select>標簽)作為表單的重要組成部分,為用戶提供了一個從預定義選項中選擇值的方式,本文將深入探討<select>標簽的屬性、樣式,并重點介
    2025-02-27
  • HTML5 Input 日期選擇器詳解

    本文介紹了HTML5InputDatePicker對象表示HTML``元素,是HTML5中的新對象,介紹了日期、周、月份、時間、日期+時間、本地日期時間等不同類型的日期選擇器,感興趣的朋友一起看
    2025-02-17
  • HTML5超鏈接和圖片基礎用法詳解

    本文介紹了HTML5中的超鏈接、相對路徑和圖片的使用方法,超鏈接可以創(chuàng)建指向另一個文檔或頁面內部書簽的鏈接,相對路徑用于在同一服務器內部跳轉頁面,圖片標簽用于引入外部圖
    2025-02-17
  • HTML5超鏈接的創(chuàng)建方法

    本文介紹了HTML5超鏈接的創(chuàng)建方法,包括基本語法、創(chuàng)建圖像超鏈接的邊框去除方法以及錨點鏈接的使用,還討論了超鏈接的四種不同狀態(tài)(link、visited、hover、active)的CSS樣
    2025-02-17
  • HTML5使用details標簽:展開/收縮信息

    最近看一些技術網(wǎng)站發(fā)現(xiàn)了details 標簽的妙用,這個不用js即可實現(xiàn)展開/收縮信息,很方便用來讓用戶先才答案,然后下面點擊再給出答案的效果,這里就為大家簡單介紹一下,
    2024-11-03

最新評論