小程序画带圆角的圆形进度条

老的API

复制代码

<canvas id="{{canvasId}}" canvas-id="{{canvasId}}" style="opacity: 0;" class="canvas"/>

startDraw() {
      const { canvasId } = this.data
      const query = this.createSelectorQuery()
        query
        .select(`#${canvasId}`)
        .boundingClientRect(res => {
          if (res?.width) {
            const width = res.width
            const height = res.height
            this.data.canvasWidth = width
            this.data.canvasHeight = height
          }
          this.data.canvasContext = wx.createCanvasContext(canvasId, this)
          this.startProgress()
        })
        .exec()
    },
    startProgress() {
      const context = this.data.canvasContext
      const width = this.data.canvasWidth
      const height = this.data.canvasHeight
      // 计算百分比
      let  percentage = 1
      // 传入剩余和总数 或者传入进度 能算出百分比就行
      const remain = 0
      const total = 0
      const progress = total - remain
      if (remain && total) {
        percentage = progress / total
      }
      // 原点
      const centerX = width / 2
      const cenetrY = height / 2
      // 半径
      const radius = width / 2 - 12
      // 线条粗细
      const lineWidth = 10
      // 线条形状
      const lineCap = 'round'
      // 背景条颜色
      let backgroundColor = 'rgba(80, 158, 46, 0.40)'
      // 进度条颜色
      let progressColor = '#509E2E'

    
      // 背景圆环
      context.beginPath()
      context.arc(
        centerX,
        cenetrY,
        radius,
        -0.75 * Math.PI,
        1.5 * Math.PI,
        false
      )
      context.lineWidth = lineWidth
      context.lineCap = lineCap
      context.strokeStyle = backgroundColor
      context.stroke()

      // 进度圆环
      if (remain && total) {
        context.beginPath()
        context.arc(
          centerX,
          cenetrY,
          radius,
          -0.5 * Math.PI,
          (-0.5 + 2 * percentage) * Math.PI,
          false
        )
        context.lineWidth = lineWidth
        context.lineCap = lineCap
        context.strokeStyle = progressColor
        context.stroke()
      }
      context.draw()
    },

复制代码

      <canvas type="2d" canvas-id="{{canvasId}}" id="{{canvasId}}" class="canvas"/>

startDraw() {
      const { canvasId, canvasWidth, canvasHeight } = this.data
      const query = this.createSelectorQuery().in(this)
  
        query
        .select(`#${canvasId}`)
        .fields({ node: true, size: true })
        .exec(res => {
          const canvas = res[0].node
          const ctx = canvas.getContext('2d')
          canvas.width = canvasWidth
          canvas.height = canvasHeight
          this.data.canvasContext = ctx
          this.startProgress()
        })
    },
    startProgress() {
      const context = this.data.canvasContext
      const width = this.data.canvasWidth
      const height = this.data.canvasHeight
      context.clearRect(0, 0, width, height)
      // 计算百分比
      let  percentage = 1
      // 设置剩余和总数
      const remain = 50
      const total = 100
      const progress = total - remain
      if (remain && total) {
        percentage = progress / total
      }
      // 原点
      const centerX = width / 2
      const cenetrY = height / 2
      // 半径
      const radius = width / 2 - 12
      // 线条粗细
      const lineWidth = 14
      // 线条形状
      const lineCap = 'round'
      // 背景条颜色
      let backgroundColor = 'rgba(80, 158, 46, 0.40)'
      // 进度条颜色
      let progressColor = '#509E2E'

      // 异常颜色
      if (deviceStatus == 'OFFLINE') {
        backgroundColor = 'rgba(208, 2, 27, 0.40)'
        progressColor = '#D0021B'
      }
      // 背景圆环
      context.beginPath()
      context.arc(
        centerX,
        cenetrY,
        radius,
        -0.75 * Math.PI,
        1.5 * Math.PI,
        false
      )
      context.lineWidth = lineWidth
      context.lineCap = lineCap
      context.strokeStyle = backgroundColor
      context.stroke()

      // 进度圆环
      if (remain && total) {
        context.beginPath()
        context.arc(
          centerX,
          cenetrY,
          radius,
          -0.5 * Math.PI,
          (-0.5 + 2 * percentage) * Math.PI,
          false
        )
        context.lineWidth = lineWidth
        context.lineCap = lineCap
        context.strokeStyle = progressColor
        context.stroke()
      }
    },

this.createSelectorQuery().in(this)要在ready之后调用哦

css

复制代码

.canvas {
        height: 340rpx;
        width: 340rpx;
    
      }

老api js里宽高的设置的是170

2d里宽高设置的是340