小程序 mpvue 使用canvas绘制环形图表

本来想用css3来实现，发现轮廓边上残影严重，所以直接用小程序的canvas使用来。
最终效果如下：
在这里插入图片描述
我的整页代码如下，里面已经写出备注来。

<template><div class="statistic"><canvas canvas-id="runCanvas" id="runCanvas" class='canvas'></canvas></div>
</template>
<script>export default {data() {return {}},methods: {run(x0, y0, nowPercent) {// 1° 设置配置参数// 环形的线宽度const lineWidth = 16;// 半径const radius = x0 - lineWidth;// 起始弧const sAngle = -0.5 * Math.PI;// 终止弧let eAngle = (2 * Math.PI / 100 * nowPercent) - 0.5 * Math.PI;// 2° 画圆环阴影this.ctx2.setLineWidth(16);this.ctx2.setStrokeStyle('#d2d2d2');this.ctx2.setLineCap('round')this.ctx2.arc(x0, y0, radius, 0, 2 * Math.PI, false);//对当前路径进行描this.ctx2.stroke();// 3° 画圆环激活高亮部分this.ctx2.beginPath();//开始一个新的路径this.ctx2.setLineWidth(16);this.ctx2.setStrokeStyle('#00D49F');this.ctx2.setLineCap('round')this.ctx2.arc(x0, y0, radius, sAngle, eAngle, false);this.ctx2.stroke();// 4° 设置环心字体this.ctx2.beginPath();// 字体大小 注意不要加引号this.ctx2.font = 'normal bold 40px sans-serif';// 字体颜色this.ctx2.setFillStyle("#00D49F");// 字体位置this.ctx2.setTextAlign("center");// 字体对齐方式this.ctx2.setTextBaseline("middle");// 文字内容和文字坐标this.ctx2.fillText(nowPercent + "%", x0, y0);// 5°最后通过draw把上面的描述绘制出来this.ctx2.draw();},draw(id, percent) {this.ctx2 = wx.createCanvasContext(id);const that = this;wx.createSelectorQuery().select('#' + id).boundingClientRect(function (rect) { //监听canvas的宽高// 获取圆心坐标var x0 = parseInt(rect.width / 2); //获取canvas宽的的一半var y0 = parseInt(rect.height / 2); //获取canvas高的一半，// 开始画画that.run(x0, y0, percent);}).exec();},},mounted() {this.draw('runCanvas', 50);}
}
</script><style lang="less" scoped>.canvas {width: 150px;height: 150px;position: absolute;left: 0;top: 0;bottom: 0;right: 0;margin: auto auto;z-index: 99;}
</style>
<style lang="less">page {background: white;}
</style>