使用canvas畫圓形（弧形）進度條

效果如下：

可以展示整個圓、半圓以及任意角度弧形（左右對稱）的進度條。整體思路如下：

完整**如下：

function draw(percent, sr) 

if (sr < math.pi/2 || sr >= 3/2 * math.pi) 
var canvas = document.queryselector('#canvas'),
cxt = canvas.getcontext('2d'),
cwidth = canvas.width,
cheight = canvas.height,
basecolor = '#e1e1e1',
covercolor = '#fe4d43',
pi = math.pi,
sr = sr || 1/2 * pi; // 預設圓弧的起始點弧度為π/2
var finalradian = sr + ((pi + (pi - sr) * 2) * percent / 100); // 紅圈的終點弧度
var step = (pi + (pi - sr) * 2)/100; // 乙個1%對應的弧度大小
var text = 0; // 顯示的數字
window.requestanimationframe(paint);
function paint() 
}  function drawcanvas(x,y,r,sradian,eradian,color,linewidth) 

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 度從...

HTML5之Canvas畫圓形

html5之canvas畫圓形 1 設計原始碼 2 設計結果 3 分析說明 1 建立路徑 context.beginpath 2 建立圓形路徑 context.arc 600,300,200,0,math.pi 2,true 第乙個引數x 起點橫座標 第二個引數y 起點縱座標 第三個引數radius...