wxml文件中布局
js逻辑文件
drawProgressbg:function(){
// 使用 wx.createContext 获取绘图上下文 context
var ctx = wx.createCanvasContext('canvasProgressbg')
ctx.translate(this.data.width/3, this.data.width/3)
ctx.setLineWidth(4);// 设置圆环的宽度
ctx.setStrokeStyle('#01CDA8'); // 设置圆环的颜色
ctx.setFillStyle('#01CDA8')
ctx.setLineCap('round') // 设置圆环端点的形状
ctx.beginPath();//开始一个新的路径
ctx.arc(0, 0, 70, 0, 2 * Math.PI, false);
ctx.fill();
ctx.setLineWidth(1);// 设置圆环的宽度
ctx.setStrokeStyle('#01CDA8'); // 设置圆环的颜色
ctx.setFillStyle('#01CDA8')
ctx.setLineCap('round') // 设置圆环端点的形状
ctx.beginPath();//开始一个新的路径
ctx.arc(0, 0, 75, 0, 2 * Math.PI, false);
ctx.stroke();
ctx.setLineWidth(2);// 设置圆环的宽度
ctx.setStrokeStyle('#dddddd'); // 设置圆环的颜色
ctx.setFillStyle('#01CDA8')
ctx.setLineCap('round') // 设置圆环端点的形状
ctx.beginPath();//开始一个新的路径
ctx.arc(0, 0, 90,0.7* Math.PI, 2.3 * Math.PI, false);
ctx.stroke();
const scale=[0,10,20,30,40,50,60,70,80,90,100]
// //画刻度线
ctx.setFillStyle('#01CDA8')
// 以下精度可以加接口控制
ctx.setFontSize(12)
ctx.setTextAlign('center')
for (let i = 0; i < scale.length; i++) {
const value = scale[i]
let angle = (value / 100) * (2.3* Math.PI - 0.7* Math.PI) + 0.7* Math.PI
if (angle >= Math.PI * 2) {
angle = angle - Math.PI * 2
}
const point = this.getPoint(0, 0, 100, angle);
const PI_3_2 = Math.PI * 1.5;
const PI_1_2 = Math.PI * 0.5;
ctx.save()
ctx.translate(point.x, point.y)
const rotateDegrees = angle >= PI_3_2 ? (angle - PI_3_2) : (angle + PI_1_2);
ctx.rotate(rotateDegrees)
ctx.fillText(value, 0, 0)
ctx.restore()
}
ctx.draw();
// }
},
getPoint: function(x, y, r, angle) {
const x1 = x + r * Math.cos(angle);
const y1 = y + r * Math.sin(angle);
return {
x: x1,
y: y1
}
// }
},
drawProgresstext:function () {
var ctx = wx.createCanvasContext('canvasProgresstext')
ctx.translate(this.data.width/3, this.data.width/3)
//画当前进度圆弧
ctx.setLineWidth(6);// 设置圆环的宽度
ctx.setStrokeStyle('#01CDA8'); // 设置圆环的颜色
ctx.setLineCap('round') // 设置圆环端点的形状
ctx.beginPath();//开始一个新的路径
ctx.arc(0, 0, 90,0.7* Math.PI, (0.7+(1.6*this.data.result/100)) * Math.PI, false);
ctx.stroke();
ctx.setFillStyle('white')
ctx.setTextAlign("center");
ctx.setTextBaseline("middle");
ctx.setFontSize(15);
ctx.beginPath();//开始一个新的路径
ctx.fillText("身体质量指数",0,30);
ctx.setTextAlign("center");
ctx.setTextBaseline("middle");
ctx.setFontSize(40);
ctx.fillText(this.data.result,0,-20);
// ctx.setFontSize(15);
// ctx.fillText("较前次↓-12",0,50);
ctx.draw();
},