Uniapp uses canvas to write a circular progress bar

Pit encountered

1. Using normal canvas Delay setting required draw()stroke() To take effect .
2. Use canvas2d On the developer tool of wechat applet, it is fixed on the screen , Do not roll with the container , But the mobile phone behaves normally .
3. remember ： To get an instance in a component, you need to use in(this). Such as const ctx = uni.createCanvasContext('myCanvas',this) ,const query = uni.createSelectorQuery().in(this)
   

Component code

<template>
  <div class="com-container">
    <canvas canvas-id="canvas" id="canvas" class="my-canvas" type="2d"></canvas>
  </div>
</template>

<script> export default {
       props: {
       progress: {
       type: Number, default: 50 }, innerText: {
       type: String, default: '850' } }, data() {
       return {
       ctx: null //  Canvas example  } }, mounted() {
       this.getCanvas() }, methods: {
       /** * @method  Get canvas  */ getCanvas() {
       const query = uni.createSelectorQuery().in(this) query.select('#canvas') .fields({
       node: true, size: true }) .exec((res) => {
       const canvas = res[0].node canvas.width = 120 canvas.height = 120 const ctx = canvas.getContext('2d') this.ctx = ctx }) setTimeout(() => {
       this.drawTrack() this.drawProgress(this.progress) this.drawText(this.innerText) }, 500); }, //  Drawing tracks  drawTrack() {
       this.ctx.save() this.ctx.beginPath() this.ctx.lineCap = "round" this.ctx.lineWidth = 8 this.ctx.strokeStyle = "#dde1ed" // x coordinate ,y coordinate , radius , Starting angle , End angle , Clockwise / Anti-clockwise  this.ctx.arc(60, 60, 50, 0, 2 * Math.PI) this.ctx.stroke() this.ctx.closePath() this.ctx.restore() }, //  Draw progress  drawProgress(num) {
       this.ctx.save() this.ctx.beginPath() this.ctx.lineCap = "round" this.ctx.lineWidth = 8 this.ctx.strokeStyle = "#5f94f0" // context.arc(x,y,r,sAngle,eAngle,counterclockwise); //x coordinate ,y coordinate , radius , Starting angle , End angle , Clockwise / Anti-clockwise  this.ctx.arc( 60, 60, 50, -Math.PI / 2, -Math.PI / 2 + ((2 * num) / 100) * Math.PI, true ) this.ctx.stroke() this.ctx.closePath() this.ctx.restore() }, //  Draw text  drawText(num) {
       this.ctx.save() this.ctx.fillStyle = "#6094F3" this.ctx.font = "33px Helvetica" this.ctx.textAlign = "center" this.ctx.fillText(num, 60, 70) this.ctx.restore() } } } </script>

<style lang='scss' scoped> .com-container {
       width: 240rpx; height: 240rpx; .my-canvas {
       width: 100%; height: 100%; z-index: 999; } } </style>