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

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

相关推荐
apocelipes1 小时前
golang unique包和字符串内部化
java·python·性能优化·golang
Full Stack Developme2 小时前
java.text 包详解
java·开发语言·python
刘梦凡呀3 小时前
C#获取钉钉平台考勤记录
java·c#·钉钉
软件技术员3 小时前
微信小程序电子测宅堪墓风水罗盘
微信小程序·小程序
best_virtuoso3 小时前
PostgreSQL 常见数组操作函数语法、功能
java·数据结构·postgresql
yudiandian20143 小时前
02 Oracle JDK 下载及配置(解压缩版)
java·开发语言
future_studio3 小时前
聊聊 Unity(小白专享、C# 小程序 之 播放器)
unity·小程序·c#
楚韵天工4 小时前
宠物服务平台(程序+文档)
java·网络·数据库·spring cloud·编辑器·intellij-idea·宠物
helloworddm4 小时前
Orleans Stream SubscriptionId 生成机制详解
java·系统架构·c#
失散134 小时前
分布式专题——43 ElasticSearch概述
java·分布式·elasticsearch·架构