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

老的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()
    },

2d

复制代码
      <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

相关推荐
Debug_TheWorld9 分钟前
Apache Flink 深度解析:流处理引擎的核心原理与生产实践指南
大数据·flink·apache
码熔burning16 分钟前
【MQ篇】初识MQ!
java·微服务·mq
C_V_Better1 小时前
数据结构-链表
java·开发语言·数据结构·后端·链表
大阔1 小时前
详解Intent —— 移动应用开发(安卓)
java
想不明白的过度思考者1 小时前
Java从入门到“放弃”(精通)之旅——String类⑩
java·开发语言
敖云岚1 小时前
【LangChain4j】AI 第一弹:LangChain4j 的理解
java·人工智能·spring boot·后端·spring
xrkhy2 小时前
Collection集合,List集合,set集合,Map集合
java·数据结构·list
techdashen2 小时前
性能比拼: Go vs Java
java·开发语言·golang
24kHT2 小时前
1.1 java开发的准备工作
java·开发语言
ตาก柒Tak2 小时前
C语言五子棋项目
java·c语言·算法