canvas 畫進度條

2021-09-27 05:55:40 字數 2086 閱讀 7131

var circle01 = document.queryselector("#mycanvas01");


drawall(50, math.pi, circle01);


function drawall(percent, sr, canvasid) 


if (sr < math.pi / 2 || sr >= 3 / 2 * math.pi) 


var cxt = canvasid.getcontext('2d'),


cwidth = canvasid.width,


cheight = canvasid.height,


basecolor = 'transparent',


pi = math.pi,


sr = sr || 1 / 2 * pi; // 預設圓弧的起始點弧度為π/2


var g = cxt.createlineargradient(170, 50, 60, 100, 100, 100); //建立漸變物件  漸變開始點和漸變結束點


g.addcolorstop(0, "#0053e1"); //新增顏色點


g.addcolorstop(1, "#00fafb"); //新增顏色點


var covercolor = g;


var finalradian = ((2 * pi) * percent / 100); // 圈的終點弧度


var step = (2 * pi) / 100; // 乙個1%對應的弧度大小


var text = 0; // 顯示的數字


sr = sr || 1 / 2 * pi; // 預設圓弧的起始點弧度為π/2


var g = cxt.createlineargradient(170, 50, 60, 100, 100, 100); //建立漸變物件  漸變開始點和漸變結束點


g.addcolorstop(1, linearcolor1); //新增顏色點


g.addcolorstop(0, linearcolor2); //新增顏色點


var covercolor = g;


var finalradian = sr + ((pi + (pi - sr) * 2) * percent / 100); // 紅圈的終點弧度


var step = (pi + (pi - sr) * 2) / 30; // 乙個1%對應的弧度大小


var text = 0; // 顯示的數字

				
canvas圓形進度條
canvas中沒有直接繪製圓的方法，但有乙個繪製弧線的context.arc方法，下面講下用該方法如何繪製出效果。引數說明 看到這裡，大家就會明白怎麼畫圓了把，只要讓起始角和結束角度為乙個圓周就可以了。下面開始畫圖咯！環形進度條主要兩部分組成，一是灰色圓，另一是藍色弧度。也就是說灰色圓圈和藍色弧同圓...

				
canvas  圓形進度條
canvas width 800 height 800 style border 1px solid ccc canvas const can document.getelementbyid canvas const van can.getcontext 2d let currentdeg 0 度從...

				
canvas錐形漸變進度條
這一切需要從乙個 簡單 的需求開始，在最開始對設計第一眼看到這張圖的時候，感覺挺簡單的嘛，直接用echarts餅圖模擬出來乙個就好了 然後上echarts試了一下發現實現不出來了 設計圖這邊採用的是錐形漸變，而echarts只有線性漸變和徑向漸變。然後準備換種方案，css就有錐形漸變，然後通過con...