坑 html5中使用畫圓,弧度和角度傻傻分不清楚

2021-07-04 02:15:20 字數 693 閱讀 6759

arc方法的引數是這樣設定的arc(圓心的橫座標,圓心的縱座標, 圓的半徑,弧的起始角,弧的終止角,true/false(逆時針/順時針))

這裡的起始角是指x軸與弧的起點之間的夾角,終止角是指x軸與弧的終點之間的夾角,這裡的夾角單位都是值弧度而不是度

也就是說上面的乙個

**顯示的不是如下圖

而是這樣的

造成這樣的原因是因為,起始角和終止角的單位都是弧度我們寫的90和270瀏覽器把他當作弧度來計算了,我們把90和270轉換成角度可以得出分別是108和357度,正好是上圖中下部分的那個起點逆時針距離x軸正方向的角度,終點也是如此。

那麼如果我想要起點在90度終點在270度應該怎麼做呢,畢竟我們常用的單位是角度而不是弧度

很簡單,把角度換算成弧度就行,就像這樣

context.arc(200, 200, 100, math.pi*90/180, math.pi*270/180, true);
這裡的90和270就是我們常用的角度,乘上π/180就是弧度

如何在HTML5中使用SVG

svg 即 scalable vector graphics,是一種用來繪製向量圖的 html5 標籤。你只需定義好xml屬性,就能獲得一致的影象元素。使用svg之前先將標籤加入到html body中。就像其他的html標籤一樣,你可以.svg 即 scalable vector graphics,...

HTML5中使用JSON格式提交表單

name name value bender name hind selected bitableoption kickableoption select type checkbox name shiny checked form 生成的json資料是 例2 當表單存在多個重名的表單域時,按json...

HTML5中FileReader 的使用

filereader 讀取檔案內容 1.readastext 讀取文字檔案 可以使用txt開啟的檔案 返回文字字串,預設編碼為utf 82.readasbinarystring 讀取任意型別的檔案,返回二進位制字串。這個方法不是用來讀取檔案展示給使用者看的,而是儲存檔案。例如 讀取檔案的內容,獲取二...