<body class="">
<div class="progress">
<canvas id="canvas"></canvas>
</div>
<script>
function animation() {
//h5 js中的
var canvas = document.getElementById('canvas');
ctx = canvas.getContext('2d')
//微信小程序中
ctx = wx.createCanvasContext('canvas')
obj = {
width: 200,
height: 200,
dx: 20, // 刻度宽度
dy: 4, // 刻度高度
num: 24, // 刻度条数
r: 70, // 半径
start: -90, // 开始角度，与结束角度相对称
progress: 40, // 显示进度 （单位百分比）
index: 0, // 开始刻度
defaultColor: '#dee1e4', // 开始颜色
activeColor: '#2fd498' // 进度条颜色
};
obj.deg = (180 - 2 * obj.start) / obj.num;
canvas.width = obj.width;
canvas.height = obj.height;
for (var x = 0; x < obj.num + 1; x++) { //灰色刻度线
draw(x, obj.defaultColor);
}
function draw(x, color) { // 画出环形刻度线
ctx.save();
var deg = Math.PI / 180 * (obj.start + obj.deg * x); // 角度换算弧度
var offsetY = -(Math.sin(deg) * obj.r); // 计算刻度Y轴位置
var offsetX = -(Math.cos(deg) * obj.r); // 计算刻度X轴位置
ctx.fillStyle = color;
ctx.translate(obj.width / 2 + offsetX, obj.height / 2 + offsetY); // 修改画布坐标原点
ctx.rotate(deg); // 旋转刻度
ctx.fillRect(0, 0, obj.dx, obj.dy); // 画出刻度
ctx.restore();
}
function animate(s, time) {
if (obj.progress == 0) { // 进度为0直接退出函数
return false;
}
draw(s, obj.activeColor);
var num = obj.progress * (obj.num / 100); //格数计算
var timmer = setTimeout(function() {
obj.index = s + 1;
if (s >= num) {
clearTimeout(timmer);
} else {
if (s > num - 10) { // 剩余10格动画减速
animate(obj.index, time + 20);
} else {
animate(obj.index, time);
}
}
}, time)
}
animate(obj.index, 10)
}
animation()
</script>
</body>
正常情况下如图
