最近比较迷恋canvas,加之做了一个个人网站,有用到环形进度条,记录下来。
canvas中没有直接绘制圆的方法,但有一个绘制弧线的context.arc
方法,
下面讲下用该方法如何绘制出图片效果。
arc()方法介绍
context.arc(x,y,r,sAngle,eAngle,counterclockwise);
参数说明:
- x: 圆的中心的 x 坐标
- y: 圆的中心的 y 坐标
- r: 圆的半径
- sAngle: 起始角,以弧度计。(弧的圆形的三点钟位置是 0 度)
- eAngle: 结束角,以弧度计
- counterclockwise: 可选。规定应该逆时针还是顺时针绘图。False = 顺时针,true = 逆时针。默认false
看到这里,大家就会明白怎么画圆了把,只要让起始角和结束角度为一个圆周就可以了。
下面开始画图咯!
环形进度条
环形进度条主要两部分组成,一是灰色圆,另一是蓝色弧度。也就是说灰色圆圈和蓝色弧同圆心同半径。知道了原理大家是不是觉得瞬间简单好多。。。
第一步:画灰色圆
function Circle() {
this.radius = 100; // 圆环半径
this.lineWidth = 25; // 圆环边的宽度
this.strokeStyle = '#ccc'; //边的颜色
this.fillStyle = 'blue'; //填充色
this.line