小程序中canvas半圆统计

 

HTML代码

<canvas id="myCanvas{{index}}" canvas-id="myCanvas{{index}}" class="progress-canvas"></canvas>

CSS代码

.progress-canvas {width: 150rpx; height: 150rpx; position: absolute; top: -50rpx; right: -10rpx;}

js代码

const query = that.createSelectorQuery();
query.select('#myCanvas').boundingClientRect(res => {
     let surplusVal = 60;
     this.drawRing('myCanvas', res.width, res.height, surplusVal);
}).exec(); 

 圆的大小可以通过修改下面数字来改变

//绘制半圆
  drawRing(canvasId, width, height, angle){
    var context = wx.createCanvasContext(canvasId, this);
    // 外层圆环
    context.beginPath()
    context.arc(width / 2, height - 15, width / 2 - 10, 1 * Math.PI, 3 * Math.PI)
    context.setLineWidth(5)
    context.setLineCap('round')
    context.setStrokeStyle('#999')
    context.stroke()

    // 外层进度圆环
    context.beginPath()
    // 1.x轴 ，2y轴，3，半径，
    context.arc(width / 2, height-15 , width / 2 - 10,Math.PI * ( 2.8/ 1),
    Math.PI * (2.8 / 1) + angle / 100 * (Math.PI * 7 / 5))
    context.setLineWidth(5)
    context.setLineCap('round')
    context.setStrokeStyle('#ffcc66')
    context.stroke()
    context.draw()
  },