html:<canvas id="myCanvas" type="2d" style="width: 300px; height: 150px;"></canvas>   

draw(step, totalStep) {

​

        const query = mpvue.createSelectorQuery();

        query.select("#myCanvas")

          .fields({ node: true, size: true })

          .exec((res) => {

            const canvasObj = res[0].node;

            const canvasCtx  = canvasObj.getContext("2d");

​

            canvasCtx.clearRect(0, 0, 600, 600);

            canvasCtx.beginPath();

            canvasCtx.arc(mpvue.getSystemInfoSync().windowWidth / 2, 80, 70, Math.PI * 0.75, Math.PI * 2.25, false); // 绘制外侧圆弧

            canvasCtx.strokeStyle = "#ededed";

            canvasCtx.lineCap = "round";

            canvasCtx.lineWidth = 10;

            canvasCtx.stroke();

​

            canvasCtx.beginPath();

            canvasCtx.arc(mpvue.getSystemInfoSync().windowWidth / 2, 80, 70, Math.PI * 0.75, Math.PI * (0.75 + (1.5 / totalStep * step)), false); // 可变圆弧

            let gradient = canvasCtx.createLinearGradient(0, 0, 170, 0);

            gradient.addColorStop(0, "#ED6F23");

            gradient.addColorStop(0.5, "#E8ED2C");

            gradient.addColorStop(1.0, "#58ED0C");

            canvasCtx.strokeStyle = gradient;

            canvasCtx.lineCap = "round";

            canvasCtx.lineWidth = 10;

            canvasCtx.stroke();

​

          });

      }

<canvas id="myCanvas" type="2d" style="width: 300px; height: 150px;">