⼩程序canvas画圆环形进度条
先在wxml⽂件中创建画布
<canvas canvas-id="runCanvas" id="runCanvas" class='canvas'></canvas>
在js⽂件中初始化画布
const ctx2 = wx.createCanvasContext(id);
通过给canvas组件绑定boundingRect⽅法监听canvas容器的宽⾼
获取到canvas容器的宽⾼的⼀半以确定圆⼼的位置
var w = parseInt(rect.width / 2); //获取canvas宽的的⼀半
var h = parseInt(rect.height / 2); //获取canvas⾼的⼀半，
}).exec();
然后就可以开始画图。
先把进度条画出来，再去写动画。
run(c, w, h) { //c是圆环进度百分⽐ w，h是圆⼼的坐标
let that = this;
var num = (2 * Math.PI / 100 * c) - 0.5 * Math.PI;
//圆环的绘制
ctx2.arc(w, h, w - 8, -0.5 * Math.PI, num); //绘制的动作
ctx2.setStrokeStyle("#ff5000"); //圆环线条的颜⾊
canvas动画ctx2.setLineWidth("16"); //圆环的粗细
ctx2.setLineCap("butt"); //圆环结束断点的样式 butt为平直边缘 round为圆形线帽 square为正⽅形线帽
ctx2.stroke();
/
/开始绘制百分⽐数字
ctx2.beginPath();
ctx2.setFontSize(40); // 字体⼤⼩ 注意不要加引号
ctx2.setFillStyle("#ff5000"); // 字体颜⾊
ctx2.setTextAlign("center"); // 字体位置
ctx2.setTextBaseline("middle"); // 字体对齐⽅式
ctx2.fillText(c + "%", w, h); // ⽂字内容和⽂字坐标
ctx2.draw();
},
实现动画效果。
实现动画效果其实使⽤定时器控制run⽅法⼀直执⾏。
canvasTap(start, end, time, w, h) { //传⼊开始百分⽐和结束百分⽐的值，动画执⾏的时间，还有圆⼼横纵坐标var that = this;
start++;
if (start > end) {
return false;
}
that.run(start, w, h); //调⽤run⽅法
setTimeout(function () {
that.canvasTap(start, end, time, w, h);
}, time);
},
这就基本实现了圆环进度条的绘制。