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

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

相关推荐
拼搏@34 分钟前
第十六天,7月10日,八股
java·mybatis
Sylvia-girl4 小时前
Java——抽象类
java·开发语言
Touper.7 小时前
Redis 基础详细介绍(Redis简单介绍,命令行客户端,Redis 命令,Java客户端)
java·数据库·redis
m0_535064607 小时前
C++模版编程:类模版与继承
java·jvm·c++
虾条_花吹雪8 小时前
Using Spring for Apache Pulsar:Message Production
java·ai·中间件
tomorrow.hello8 小时前
Java并发测试工具
java·开发语言·测试工具
Moso_Rx8 小时前
javaEE——synchronized关键字
java·java-ee
张小洛8 小时前
Spring AOP 是如何生效的(入口源码级解析)?
java·后端·spring
DKPT9 小时前
Java设计模式之行为型模式(观察者模式)介绍与说明
java·笔记·学习·观察者模式·设计模式
追风少年浪子彦9 小时前
mapstruct与lombok冲突原因及解决方案
java·spring boot·spring·spring cloud