微信小程序canvas 画圆形带刻度进度条

 

.canvas_1{

position: absolute;

width: 120rpx;

height: 120rpx;

background: rgba(255, 00, 0, 0.0);

}

 

 

画进度条（我这是固定分为32等分，可以设置变量，分为任意等分）

ratio为px,转RPX比例

 wx.getSystemInfo({
      success: function (res) {
        // 获取可使用窗口宽度
        let clientHeight = res.windowHeight;
        // 获取可使用窗口高度
        let clientWidth = res.windowWidth;
        // 算出比例
        ratio = 750 / clientWidth;
        }
    }）

/**
 * 画进度条
 */
function drawProgress(pro,id) {
  var context = wx.createCanvasContext(id)
  var r = 45 / ratio;
  var x0 = 60 / ratio;
  var y0 = 60/ ratio;
  var x;
  var y;
  var lineWidth = 18 / ratio;

  for (var i = 0; i < 32; i++) {
    context.beginPath();
    context.setLineWidth(lineWidth)
    if((i+1)<=pro){
      context.setStrokeStyle(getColor.getColour(i))
    }else{
      context.setStrokeStyle("#252525")
    }
   
    x = x0 - (r * Math.sin((11.25 * (i + 1) - 3) * Math.PI / 180))
    y = y0 - (r * Math.cos((11.25 * (i + 1) - 3) * Math.PI / 180))

    // console.log("x0:"+x0+"   y0:"+y0 +"    x:"+x+"    y:"+y)
    context.moveTo(x, y)
    context.arc(x0, y0, r, (270 - 11.25 * (i + 1) + 3) * Math.PI / 180, (270 - 11.25 * i) * Math.PI / 180, false)
    context.stroke();
    context.closePath();
  }
  context.stroke()
  context.draw()
}

 

获取每一等分的颜色getColor.js

var arrColor = ["#eb7c3b", "#ea7b3e", "#ea7a41", "#e97845", "#e87648", "#e7744c", "#e67252", "#e57056", "#e46e5a", "#e36c5f", "#e26964", "#e1666a", "#e0646f", "#df6275", "#de5f7b", "#dc5c80", "#db5a86", "#da578c", "#d85297", "#d85396", "#d7509c", "#d7509c", "#d64da1", "#d449ab", "#d347b0", "#d244b5", "#d143b8", "#d040bd", "#cf3fc1", "#ce3dc4", "#ce3cc8","#cd3bca"];

function getColour(per){
  return arrColor[per];
}

function getColor(startColor, endColor, maxPer,nowPer) {
  var R = Math.floor(Math.floor((endColor - startColor) / 65536)% 256 * nowPer / maxPer);
  var G = Math.floor(Math.floor((endColor - startColor) / 256) % 256 * nowPer / maxPer);
  var B = Math.floor((endColor - startColor)  % 256 * nowPer / maxPer);

  var returnR = Math.floor(startColor / 65536)  + R;
  var returnG = Math.floor(startColor / 256)  % 256 + G;
  var returnB = startColor % 256 + B;
  return fix((returnR * 65536 + returnG * 256 + returnB + 0X000000).toString(16),6);
}

//数据格式化
function fix(num, length) {
  return ('' + num).length < length ? ((new Array(length + 1)).join('0') + num).slice(-length) : '' + num;
}

module.exports = {
  getColor: getColor,
  getColour: getColour,
}

 

 

小程序canvas有最高层级，如果有弹窗什么的，将会被canvas遮挡，可以在判断有弹出的时候，将canvas内容转为图片显示在image中，然后隐藏canvas

如下：

.canvas_bg{
    position: absolute;
     width: 120rpx;
  height: 120rpx;
  background: rgba(55, 00, 55, 0.0);
}


.canvas_1{
    position: absolute;
     width: 120rpx;
  height: 120rpx;
  background: rgba(255, 00, 0, 0.0);
}


.canvas_img{
    position: absolute;
     width: 120rpx;
  height: 120rpx;
  background: rgba(00, 00, 255, 0.0);
 
}

当需要显示弹窗时，调用以下方法，显示image，hide  canvas

function handleCanvarToImg() {
  popupSHow = true;
  wx.canvasToTempFilePath({
    x: 0,
    y: 0,
    width: 120 / ratio,
    height: 120 / ratio,
    canvasId: "Canvas1",
    success: function (res) {
      that.setData({
        img1Hide:false,
        canvas1Img: res.tempFilePath,
        canvas1Hide: true,
      });
      console.log('Canvas1转图片')
    }
  });

}

当弹窗取消是，隐藏image ，显示canvas

  popupSHow = false;
    that.setData({
      popupDisplay: "hidden",
      img1Hide: true,
      canvas1Hide: false,
   
    });