js初級應用之svg實現環形進度條

2021-09-19 17:15:28 字數 1201 閱讀 6031

整理乙個svg繪製環形進度條的demo,需要的同學拿去用即可

在html頁面的任何位置,新增svg繪圖面板。定義svg繪圖區域大小

cx 和 cy 屬性定義圓點的 x 和 y 座標,單位省略為px,如果省略 cx 和 cy,圓的中心會被設定為 (0, 0),r 屬性定義圓的半徑,stroke定義描邊的顏色,stroke-width定義描邊寬度,fill定義填充顏色

首先檢視一下常用的path指令,獲取svg中的path,指定半徑為100,進度為50,我們繪製乙個扇形

var path = document.getelementbyid('ring');

var r=100;

var progress=50;

//將path平移到我們需要的座標位置

ring.setattribute('transform', 'translate('+r+','+r+')');

// 計算當前的進度對應的角度值

var degrees = progress * (360/100);

// 計算當前角度對應的弧度值

var rad = degrees* (math.pi / 180);

//極座標轉換成直角座標

var x = (math.sin(rad) * r).tofixed(2);

var y = -(math.cos(rad) * r).tofixed(2);

//大於180度時候畫大角度弧,小於180度的畫小角度弧,(deg > 180) ? 1 : 0

var lenghty = window.number(degrees > 180);

//path 屬性

var descriptions = ['m', 0, 0, 'v', -r, 'a', r, r, 0, lenghty, 1, x, y, 'z'];

// 給path 設定屬性

path.setattribute('d', descriptions.join(' '));

path引數為繪圖面板id,progress為進度值0-100,r為半徑

function draw(path,progress,r)

svg 實現半環形進度條

path元素用來定義形狀的通用元素。下面的命令可用於路徑資料 注釋 以上所有命令均允許小寫字母。大寫表示絕對定位,小寫表示相對定位。例如 畫個圓環 解析 symbol元素用來定義乙個圖形模板物件,它可以用乙個元素例項化。symbol元素對圖形的作用是在同一文件中多次使用,新增結構和語義。結構豐富的文...

Linux拓展應用之ping功能實現詳解

define max wait time 5 接收超時5秒 define max no packets 3 char sendpacket packet size char recvpacket packet size int sockfd,datalen 56 int nsend 0,nrecei...

141 環形鍊錶(JS實現)

給定乙個鍊錶,判斷鍊錶中是否有環。為了表示給定鍊錶中的環,我們使用整數 pos 來表示鍊錶尾連線到鍊錶中的位置 索引從 0 開始 如果 pos 是 1,則在該鍊錶中沒有環。示例 1 輸入 head 3,2,0,4 pos 1 輸出 true 解釋 鍊錶中有乙個環,其尾部連線到第二個節點。示例 2 輸...