整理乙個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 輸...