校园春色亚洲色图_亚洲视频分类_中文字幕精品一区二区精品_麻豆一区区三区四区产品精品蜜桃

主頁 > 知識庫 > HTML5 Canvas中使用用路徑描畫圓弧

HTML5 Canvas中使用用路徑描畫圓弧

熱門標簽:阜陽企業外呼系統 呼和浩特外呼電銷系統排名 地圖標注位置能賺錢嗎 pageadm實現地圖標注 南通數據外呼系統推廣 外呼系統電話怎么投訴 外呼線穩定線路 邢臺縣地圖標注app 申請400電話流程簡介

本文翻譯自Steve Fulton & Jeff Fulton HTML5 Canvas, Chapter 2, “Advanced Path Methods, Arcs”

在Canvas繪圖中,“圓弧”既可以是一個整圓,也可以是圓周的一部分。

復制代碼
代碼如下:

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

在上述方法描述中,x和y定義圓心,radius定義圓周的半徑。startAngle和endAngle以極坐標值表示。anticlockwise(布爾值)定義圓弧的方向。

比如,如果我們想描畫一個以點(100, 100)為圓心,半徑為20的圓周,我們可以使用以下代碼:

復制代碼
代碼如下:

context.arc(100, 100, 20, (Math.PI/180)*0, (Math.PI/180)*360, false);

執行效果為:

值得注意的是,在上述代碼中,我們需要將起始角度(0)和結束角度(360)通過乘以(Math.PI/180)來轉換成極坐標弧度。當起始角度為0而結束角度為360時,得到的是一個整圓。

除了整圓,我們也可以描畫圓弧片段。下述代碼描畫了四分之一個圓周:

復制代碼
代碼如下:

context.arc(100, 100, 20, (Math.PI/180)*0, (Math.PI/180)*90, false);

如果我們想描畫除上述圓弧之外的另外四分之三個圓周,我們可以將anticlockwise設置為true:

復制代碼
代碼如下:

context.arc(100, 100, 20, (Math.PI/180)*0, (Math.PI/180)*90, true);

譯注1:在Canvas的坐標系中,Y軸的方向是向下的。

譯注2:使用context.arcTo()方法也可以描畫圓弧。Steve Fulton & Jeff Fulton 的 HTML5 Canvas 原著中對該方法的描述是完全錯誤的。正確的arcTo()總結詳見:曲線之arcTo。

標簽:撫順 黃山 辛集 蚌埠 鶴崗 德州 楊凌 內蒙古

巨人網絡通訊聲明:本文標題《HTML5 Canvas中使用用路徑描畫圓弧》,本文關鍵詞  HTML5,Canvas,中使,用用,路徑,;如發現本文內容存在版權問題,煩請提供相關信息告之我們,我們將及時溝通與處理。本站內容系統采集于網絡,涉及言論、版權與本站無關。
  • 相關文章
  • 下面列出與本文章《HTML5 Canvas中使用用路徑描畫圓弧》相關的同類信息!
  • 本頁收集關于HTML5 Canvas中使用用路徑描畫圓弧的相關信息資訊供網民參考!
  • 推薦文章
    主站蜘蛛池模板: 中江县| 灌南县| 鹤壁市| 车险| 辉南县| 台北县| 高州市| 辛集市| 洪洞县| 宜君县| 张家港市| 保亭| 浙江省| 波密县| 安化县| 融水| 新干县| 咸阳市| 察隅县| 潼关县| 东乡族自治县| 虞城县| 乌拉特中旗| 若羌县| 盱眙县| 买车| 资源县| 三河市| 博罗县| 普兰店市| 永德县| 遂川县| 松潘县| 锡林郭勒盟| 北安市| 公安县| 友谊县| 安国市| 吕梁市| 八宿县| 买车|