1.實(shí)現(xiàn)效果
image.png
2.微信小程序canvas官網(wǎng)
https://developers.weixin.qq.com/miniprogram/dev/component/canvas.html
3.組件介紹
Canvas2D接口（type="2d"）,支持同層渲染的一個(gè)圓環(huán)進(jìn)度條。（wx.createCanvasContext已廢棄）
image.png
4.部分代碼
drawCanvasRing() {
//canvas 2d
const query = wx.createSelectorQuery().in(this);
query.select('#myCanvas')
.fields({ node: true , size: true})
.exec(this.init.bind(this))
},
init(res){
const canvas = res[0].node
const ctx = canvas.getContext('2d');
const dpr = wx.getSystemInfoSync().pixelRatio
canvas.width = res[0].width * dpr
canvas.height = res[0].height * dpr
ctx.scale(dpr, dpr);
// 大小值的計(jì)算
var circle_r = this.data.canvasWidth / 2; //畫(huà)布的一半，用來(lái)找中心點(diǎn)和半徑
var startDegree = this.data.startDegree; //從什么角度開(kāi)始
var maxValue = this.data.maxValue; //最大值
var minValue = this.data.minValue; //最小值
var value = this.data.value; //當(dāng)前的值
var lineColor = this.data.lineColor; //線(xiàn)條顏色
var lineWidth = this.data.lineWidth; //線(xiàn)條寬度
var percent = 360 * ((value - minValue) / (maxValue - minValue)); //計(jì)算結(jié)果
//定義起始點(diǎn)
ctx.translate(circle_r, circle_r);
//灰色圓弧
ctx.beginPath();
ctx.strokeStyle="#ebebeb";
ctx.lineWidth=lineWidth;
ctx.arc(0, 0, circle_r - 10, 0, 2 * Math.PI, true);
ctx.stroke();
ctx.closePath();
//有色彩的圓弧
ctx.beginPath();
ctx.strokeStyle=lineColor;
ctx.lineWidth=lineWidth;
ctx.arc(0, 0, circle_r - 10, startDegree * Math.PI / 180 - 0.5 * Math.PI, percent * Math.PI / 180 + startDegree * Math.PI / 180 - 0.5 * Math.PI, false);
ctx.stroke();
ctx.closePath();
}
5.完整代碼
https://gitee.com/susuhhhhhh/components
