微信小程序仪表盘

wxml文件中布局
<view class="view-main1-canvas">

        <view class="view-canvas">

             <canvas class="progress_bg"   canvas-id="canvasProgressbg">  </canvas>

              <canvas class="progress_text"   canvas-id="canvasProgresstext"> </canvas>

         </view>

</view>
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();
      },
微信小程序仪表盘

猜你喜欢
