直播app源码，canvas 环形刻度进度条

let ctx = null<br>let obj = {}<br>Page({<br>  data: {<br>  },<br>  onLoad: function (options) {},<br>  <br>  onReady() {<br>    this.animation()<br>  },<br>  animation() {<br>    const query = wx.createSelectorQuery()<br>    query.select('#firstCanvas')<br>      .fields({<br>        node: true,<br>        size: true<br>      })<br>      .exec((res) => {<br>        const canvas = res[0].node<br>        ctx = canvas.getContext('2d')<br>        obj = {<br>          width: 300,<br>          height: 300,<br>          dx: 20, // 刻度宽度<br>          dy: 4, // 刻度高度<br>          num: 24, // 刻度条数<br>          r: 70, // 半径<br>          start: -90, // 开始角度，与结束角度相对称<br>          progress: 75, // 显示进度 （单位百分比）<br>          index: 0, // 开始刻度<br>          defaultColor: '#dee1e4', // 开始颜色<br>          activeColor: '#5CCCFF' // 进度条颜色<br>        };<br>        this.setData({<br>          process: obj.progress<br>        })<br>        obj.deg = (180 - 2 * obj.start) / obj.num;<br>        canvas.width = obj.width;<br>        canvas.height = obj.height;<br>        for (var x = 0; x < obj.num; x++) { //灰色刻度线<br>          draw(x, obj.defaultColor);<br>        }<br>        function draw(x, color) { // 画出环形刻度线<br>          ctx.save();<br>          var deg = Math.PI / 180 * (obj.start + obj.deg * x); // 角度换算弧度<br>          var offsetY = -(Math.sin(deg) * obj.r); // 计算刻度Y轴位置<br>          var offsetX = -(Math.cos(deg) * obj.r); // 计算刻度X轴位置<br>          ctx.fillStyle = color;<br>          ctx.translate(obj.width / 2 - offsetX, obj.height / 2 - offsetY); // 修改画布坐标原点<br>          ctx.rotate(deg); // 旋转刻度<br>          ctx.fillRect(0, 0, obj.dx, obj.dy); // 画出刻度<br>          ctx.restore();<br>        }<br>        function animate(s, time) {<br>          if (obj.progress == 0) { // 进度为0直接退出函数<br>            return false;<br>          }<br>          draw(s, obj.activeColor);<br>          var num = obj.progress * (obj.num / 100); //格数计算<br>          var timmer = setTimeout(function () {<br>            obj.index = s + 1;<br>            if (s >= num) {<br>              clearTimeout(timmer);<br>            } else {<br>              if (s > num - 10) { // 剩余10格动画减速<br>                animate(obj.index, time + 20);<br>              } else {<br>                animate(obj.index, time);<br>              }<br>            }<br>          }, time)<br>        }<br>        animate(obj.index, 10)<br>      })<br>  }<br>})