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

主頁 > 知識庫 > 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中使用用路徑描畫圓弧的相關信息資訊供網民參考!
  • 推薦文章
    主站蜘蛛池模板: 中卫市| 贵州省| 石景山区| 时尚| 吴川市| 龙泉市| 丹江口市| 桦川县| 诸暨市| 普陀区| 泰和县| 泰安市| 唐河县| 中西区| 榆林市| 都匀市| 寿阳县| 芒康县| 麻江县| 盖州市| SHOW| 襄樊市| 丰镇市| 瑞金市| 宁强县| 青铜峡市| 汶上县| 太仓市| 威信县| 东乡| 洛扎县| 南木林县| 蓝田县| 赤壁市| 治县。| 综艺| 时尚| 全椒县| 花莲市| 恭城| 泗水县|