uniapp 中 canvas 中使用计时器写了多个弧度动画 看不到任何东西

<template>
<view>
<!-- <canvas style="width: 300px; height: 200px;" canvas-id="firstCanvas" id="firstCanvas"></canvas> -->
<canvas class="canvas" type="2d" style="width: 100%;height: 400px;" canvas-id="myCanvas" id="myCanvas"></canvas>
</view>
</template>

<script>
export default {
data() {
return {
SystemInfo: {} // 设备信息
};
},
onLoad() {},
onReady() {
this.draws(50);
},
methods: {
draws(percent, sR) {
if (percent < 0 || percent > 100) {
return;
}
if (sR < Math.PI / 2 || sR >= (3 / 2) * Math.PI) {
return;
}

        var cxt = uni.createCanvasContext('myCanvas'),  
            // cWidth = this.SystemInfo.windowWidth,  
            cWidth = 400,  
            cHeight = 400,  
            baseColor = '#e1e1e1',  
            coverColor = '#fe4d43',  
            PI = Math.PI,  
            sR = sR || (3 / 4) * PI; // 默认圆弧的起始点弧度为π/2  
        var finalRadian = sR + ((PI + (PI - sR) * 2) * percent) / 100; // 红圈的终点弧度  
        var step = (PI + (PI - sR) * 2) / 100; // 一个1%对应的弧度大小  
        var text = 0; // 显示的数字  
        var img = new Image();  
        img.src = '../../static/icon/icon25.png';  
        var timer = setInterval(function() {  
            cxt.clearRect(0, 0, cWidth, cHeight);  
            var endRadian = sR + text * step;  
            let x = Math.sin((endRadian * 180) / (2 * PI)) * 80 + cWidth / 2;  
            let y = Math.cos((endRadian * 180) / (2 * PI)) * 80 + cHeight / 2;  
            // 画灰色圆弧  
            drawCanvas(cWidth / 2, cHeight / 2, 80, sR, sR + (PI + (PI - sR) * 2), baseColor, 10);  
            // 画红色圆弧  
            drawCanvas(cWidth / 2, cHeight / 2, 80, sR, endRadian, coverColor, 10);  
            // 画红色圆头  
            // 红色圆头其实就是一个圆，关键的是找到其圆心，涉及到三角函数知识，自己画个图一看就明了  
            var angle = 2 * PI - endRadian; // 转换成逆时针方向的弧度（三角函数中的）  
            let xPos = Math.cos(angle) * 80 + cWidth / 2; // 红色圆 圆心的x坐标  
            let yPos = -Math.sin(angle) * 80 + cHeight / 2; // 红色圆 圆心的y坐标  
            // drawCanvas(xPos, yPos, 10, 0, 2 * PI, coverColor, 2);  
            // 图片圆周运动  
            // cxt.drawImage(img, xPos - 10, yPos - 10, 20, 20);  
            // 数字  
            cxt.fillStyle = coverColor;  
            cxt.setFontSize(10);  
            var textWidth = cxt.measureText(text + '%').width;  
            cxt.fillText(text + '%', cWidth / 2 - textWidth / 2, cHeight / 2);  
            // cxt.draw()  
            text++;  
            if (endRadian.toFixed(2) >= finalRadian.toFixed(2)) {  
                clearInterval(timer);  
            }  
        }, 15);  
        function drawCanvas(x, y, r, sRadian, eRadian, color, lineWidth) {  
            cxt.beginPath();  
            cxt.lineCap = 'round';  
            cxt.strokeStyle = color;  
            cxt.lineWidth = lineWidth;  
            cxt.arc(x, y, r, sRadian, eRadian, false);  
            cxt.stroke();  
        }  
    }  
}  

};
</script>

<style></style>