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);
复制代码

好，完美。

--完--