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

老的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

相关推荐
肉肉不想干后端1 分钟前
gRPC服务架构整合springboot部署实践指南
java
天天摸鱼的java工程师17 分钟前
volatile关键字实战指南:八年Java开发者详解五大应用场景
java·后端
刃神太酷啦28 分钟前
C++ 多态详解:从概念到实现原理----《Hello C++ Wrold!》(14)--(C/C++)
java·c语言·c++·qt·算法·leetcode·面试
wjm0410061 小时前
C++后端面试八股文
java·c++·面试
都叫我大帅哥1 小时前
📉 MySQL索引罢工事件簿:揭秘失效原因与优化起义方案
java·mysql
Seven971 小时前
剑指offer-11、⼆进制中1的个数
java
you秀1 小时前
K8S中的dns要如何指定??给pod中增加hosts映射,来规避dns冲突问题
java·容器·kubernetes
2501_915909062 小时前
iOS如何查看电池容量?理解系统限制与开发者级能耗调试方法
android·ios·小程序·https·uni-app·iphone·webview
Code季风2 小时前
深度优化 spring 性能:从缓存、延迟加载到并发控制的实战指南
java·spring boot·后端·spring·缓存·性能优化