在一次项目开发中，有个应用需求，就是不仅展示用户答题之后的分数和测评等级，还要利用动画圆圈的形式展示用户完成比。
首先一般先想到的就是利用canvas绘图，因为如果用CSS来制作的话会很麻烦，而且还要配合脚本一起完成才行。
HTML5 <canvas> 标签用于绘制图像（通过脚本，通常是 JavaScript）。
不过，<canvas> 元素本身并没有绘制能力（它仅仅是图形的容器） - 您必须使用脚本来完成实际的绘图任务。
getContext() 方法可返回一个对象，该对象提供了用于在画布上绘图的方法和属性。
getContext("2d") 对象属性和方法，可用于在画布上绘制文本、线条、矩形、圆形等等。
具体可查看w3c官网文档里给出的介绍：http://www.w3school.com.cn/tags/html_ref_canvas.asp
还有小程序官网平台给出的文档：https://developers.weixin.qq.com/miniprogram/dev/component/canvas.html?search-key=arc
好，现在开始正式绘制这个需求。
canvas其中有一个属性是绘图的关键，那就是它的arc属性，具体是这样的：
let cxt_arc = wx.createCanvasContext('canvasArc');//创建并返回绘图上下文context对象。
/*
cxt_arc.arc(x, y, r, sAngle, eAngle, counterclockwise);
x Number 圆的x坐标
y Number 圆的y坐标
r Number 圆的半径
sAngle Number 起始弧度，单位弧度（在3点钟方向）
eAngle Number 终止弧度
counterclockwise Boolean 可选。指定弧度的方向是逆时针还是顺时针。默认是false，即顺时针。
*/这里尤其要特别注意的是第四个参数，第四个参数代表绘图的起始弧度，并且默认是从三点钟方向开始的，所以如果想从12点钟方向开始绘图的话，需要将第四个参数设置为：- Math.PI * 1 / 2。意思很明显，因为第六个参数是指绘图的方向，如果设置为false，那就是顺时针，一般也设置为顺时针，因为12点钟是在3点钟的逆时针方向上，所以第四个参数应该为负数，即需要负整个圆的四分之一，因为2*PI代表的是整个圆，那么1/2就是四分之一圆了，所以要想从12点钟开始绘图，那么第四个参数需设置为：- Math.PI * 1 / 2。
好，接下来直接上代码：
上代码之前，这里给三个个提示：
1.就是脚本里面设置的一些关系像素的数据默认都是px，而现在小程序为了兼容各个移动终端，给出了一个新的像素单位，就是rpx。但是canvas绘图是与脚本一起完成的，所以这里建议大家还是统一像素单位比较好；
2.下面我是用定时器setInterval实现的，一定要注意的是，一旦启用定时器，那么在实现你的功能之后，一定要记得关闭；
3.微信小程序里有一个用于展示进度的组件<progress>，大家可以直接调用，但是比较局限。链接：https://developers.weixin.qq.com/miniprogram/dev/component/progress.html?search-key=progress
HTML部分：
<view class='circleBar'>
<view class="wrap">
<view class="top">
<canvas class="cir" style=' width:106px; height:106px;' canvas-id="canvasArc"></canvas>
<view class="centerWord">{{resultComment}}</view>
</view>
</view>
</view>CSS部分：
/* 圆形进度条 */
.circleBar {
width: 100%;
height: auto;
overflow: hidden;
position: relative;
}
.cir {
display: inline-block;
background-color: #fff;
border-radius: 100%;
}
.top {
text-align: center;
}
.centerWord {
width: 100%;
position: absolute;
top: 40px;
left: 0;
text-align: center;
color: #3686ff;
}JS部分：
Page({
/**
* 页面的初始数据
*/
data: {
timer: ''
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
// 页面初始化 options为页面跳转所带来的参数
let that = this;
// 以下两个是测试数据
let totalItems = 100;
let rightItems = 80;
let completePercent = parseInt((rightItems / totalItems) * 100);
that.getResultComment(completePercent);
that.showScoreAnimation(rightItems, totalItems);
},
showScoreAnimation: function (rightItems, totalItems) {
/*
cxt_arc.arc(x, y, r, sAngle, eAngle, counterclockwise);
x Number 圆的x坐标
y Number 圆的y坐标
r Number 圆的半径
sAngle Number 起始弧度，单位弧度（在3点钟方向）
eAngle Number 终止弧度
counterclockwise Boolean 可选。指定弧度的方向是逆时针还是顺时针。默认是false，即顺时针。
*/
let that = this;
let copyRightItems = 0;
that.setData({
timer: setInterval(function () {
copyRightItems++;
if (copyRightItems == rightItems) {
clearInterval(that.data.timer)
} else {
// 页面渲染完成
// 这部分是灰色底层
let cxt_arc = wx.createCanvasContext('canvasArc');//创建并返回绘图上下文context对象。
cxt_arc.setLineWidth(6);//绘线的宽度
cxt_arc.setStrokeStyle('#d2d2d2');//绘线的颜色
cxt_arc.setLineCap('round');//线条端点样式
cxt_arc.beginPath();//开始一个新的路径
cxt_arc.arc(53, 53, 50, 0, 2 * Math.PI, false);//设置一个原点(53,53)，半径为50的圆的路径到当前路径
cxt_arc.stroke();//对当前路径进行描边
//这部分是蓝色部分
cxt_arc.setLineWidth(6);
cxt_arc.setStrokeStyle('#3ea6ff');
cxt_arc.setLineCap('round')
cxt_arc.beginPath();//开始一个新的路径
cxt_arc.arc(53, 53, 50, -Math.PI * 1 / 2, 2 * Math.PI * (copyRightItems / totalItems) - Math.PI * 1 / 2, false);
cxt_arc.stroke();//对当前路径进行描边
cxt_arc.draw();
}
}, 20)
})
},
getResultComment: function (completePercent) {
let that = this;
switch (true) {
case completePercent < 60:
that.setData({
resultComment: "渣渣"
})
break;
case completePercent >= 60 && completePercent <= 69:
that.setData({
resultComment: "学弱"
})
break;
case completePercent >= 70 && completePercent < 80:
that.setData({
resultComment: "中等"
})
break;
case completePercent >= 80 && completePercent < 90:
that.setData({
resultComment: "良好"
})
break;
case completePercent >= 90 && completePercent < 95:
that.setData({
resultComment: "优秀"
})
break;
case completePercent >= 95 && completePercent < 100:
that.setData({
resultComment: "学霸"
})
break;
case completePercent >= 100:
that.setData({
resultComment: "学神"
})
break;
}
},
}）下来是效果展示图：
