web canvas -- 實現環形進度條

canvas 實現環形進度條

效果

代碼

var canvas = document.getElementById('myCanvas');
    var ctx = canvas.getContext("2d");

	
	var drawCircle = (o) => {
		ctx.beginPath();
		ctx.lineWidth = o.lineWidth
		ctx.arc(o.x, o.y, o.radius, 1.5 * Math.PI, (1.5 + (o.angle * 2)) * Math.PI,false);
		ctx.lineCap = 'round';
		ctx.strokeStyle = o.color
		ctx.stroke();
		ctx.closePath();
	}
	drawCircle({
		angle: 1,
		color: '#1F67A5',
		lineWidth: 3,
		x: 50,
		y: 50,
		radius: 30,
	})
	drawCircle({
		angle: 0.1,
		color: '#FFDF00',
		lineWidth: 6,
		x: 50,
		y: 50,
		radius: 30,
	})
複製代碼

代碼解析

核心就是ctx.arc函數

ctx.arc(o.x, o.y, o.radius, 1.5 * Math.PI, (1.5 + (o.angle * 2)) * Math.PI,false);
複製代碼

前兩個是中心座標 也就是 x和y
第三個是半徑
第三個和第四個是開始和結束的角度
最後是是否順時針

牛刀小試

瞭解了核心，那麼咱們來試試實現上面的效果。

var drawCircle = (o) => {
		ctx.beginPath();
		ctx.lineWidth = o.lineWidth
		ctx.arc(o.x, o.y, o.radius, 0, Math.PI * 0.5,false);
		ctx.strokeStyle = o.color
		ctx.stroke();
		ctx.closePath();
	}
	drawCircle({
		angle: 0.1,
		color: '#FFDF00',
		lineWidth: 6,
		x: 50,
		y: 50,
		radius: 30,
	})
複製代碼

運行結果

？？？

怎麼不太對，圓角哪裏去了，起點怎麼變成右方。

圓角

既然核心函數沒有圓角，那麼就是別的地方設置。

找女友同樣找就能夠找到

ctx.lineCap = 'round';
複製代碼

這行代碼，加上去後就有了圓角。

可是起點不太對啊。效果圖是從頂部開始。

角度問題

這時候咱們須要看下面這張寶圖

開始的角度

能夠看到。0是在右方，而1.5纔是開始，因而咱們先設置開始爲 1.5 * Math.PI

有了開始，咱們須要結束

結束的角度設置

由於開始是1.5。因而須要設置偏移量1.5，可是這時候咱們發現一圈是2，這樣很差計算，因而須要轉成1，等下方便傳入百分比，因而這樣寫 (1.5 + (angle * 2)) * Math.PI

如今angle是多少，咱們就會正確顯示

因此代碼

再次牛刀小試

ctx.arc(o.x, o.y, o.radius, 1.5 * Math.PI, (1.5 + (o.angle * 2)) * Math.PI,false);
複製代碼

好，完美。

--完--