小程序canvas实现环形进度条

 1 export default{ 
 2   data: {
 3   },
 4   options:{
 5     draw: function (id, val1,val2,color,time) {
 6       let ctx2 = wx.createCanvasContext(id);
 7       let percent = Math.round((val1/val2)*100);
 8       wx.createSelectorQuery().select(‘#‘+id).boundingClientRect(function (rect) { //监听canvas的宽高
 9         var w = parseInt(rect.width / 2); //获取canvas宽的的一半
10         var h = parseInt(rect.height / 2); //获取canvas高的一半，
11         var count = 0;
12         var timer = setInterval(()=>{
13           if(count<percent){
14             var num = (2 * Math.PI / 100 * count++) - 0.5 * Math.PI;
15             ctx2.arc(w, h, w-2.5, -0.5 * Math.PI, num); //每个间隔绘制的弧度
16             ctx2.setStrokeStyle(color);
17             ctx2.setLineWidth("5");
18             ctx2.setLineCap("round");
19             ctx2.stroke();
20             ctx2.beginPath();
21             ctx2.setFontSize(14); //注意不要加引号
22             ctx2.setFillStyle("#666666");
23             ctx2.setTextAlign("center");
24             ctx2.setTextBaseline("middle");
25             ctx2.fillText(‘当前进度‘, w, h);
26             ctx2.setFillStyle(color);
27             ctx2.fillText(val1, w-13, h+20);
28             ctx2.setFillStyle("#666666");
29             ctx2.fillText(‘/‘, w, h+20);
30             ctx2.fillText(val2, w+13, h+20);
31             ctx2.draw();
32           }else{
33             clearInterval(timer);
34             return false;
35           }
36         },20)
37       }).exec();
38     },
39   } 
40 }

import Canvas from ‘./canvas.js‘
Page({
  ...Canvas.options,
  /**
   * 页面的初始数据
   */
  data: {
    ...Canvas.data,
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },
  onShow:function(){
    this.draw(‘runCanvas1‘,6,10,‘#376EFF‘,1000);
    this.draw(‘runCanvas2‘,4,10,‘#E33A34‘,1000);

  }
})

  
<view class=‘canvasBox‘ wx:for="{{[1,2]}}">
  <view class=‘bigCircle‘></view>
  <view class=‘littleCircle‘></view>
   <canvas canvas-id="runCanvas{{index+1}}" id="runCanvas{{index+1}}" class=‘canvas‘></canvas>
</view>

/* pages/canvasDemo/canvasDemo.wxss */
.canvasBox{
  width: 100px;
  height:100px;
  position: relative;
}
.bigCircle{
  width: 100%;
  height: 100%;
  border-radius: 50% ;
  position: absolute;
  top:0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto auto;
  background-color: #A2A2A2;
}
.littleCircle{
  width: calc(100% - 10px);
  height: calc(100% - 10px);
  border-radius: 50%;
  position: absolute;
  top:0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto auto;
  background-color: #fff;
}
.canvas{
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto auto;
  z-index: 99;
}