uniapp中使用canvas画圆形及矩形进度条

圆形进度条

效果

实现

<canvas canvas-id="myCanvas":style="{width: size + 'px',height: size + 'px'}"/>

import { getCurrentInstance } from 'vue'

const ctx = uni.createCanvasContext('myCanvas', getCurrentInstance())
function circleProcess(ctx, size, progress) {
  // 大圆半径
  const r1 = size / 2