HarmonyOS - 基于ArkUI（JS）实现自定义Circle进度条

<circularBar  percent = '80' ></circularBar>

<circularBar  percent = '60' istext = 'true'></circularBar>

<circularBar  percent = '60'  bg-width = '20' f-width = '20'></circularBar>

<circularBar  percent = '60' color-c = '#ff6600'></circularBar>

<circularBar  percent = '60' color-num = '2' start-c = '#f463b2' end-c = '#376af9'></circularBar>

<circularBar  percent = '60' bg-color = '#6a6a6a'></circularBar>

<circularBar  percent = '60' direction = 'true'></circularBar>

<div class="container">
    <div style="margin-left: 10%;">
        <canvas  ref="canvasbox" style="width: 100px; height: 100px;">
        canvas>
    div>
div>

//初始绘制
onPageShow(){
    setTimeout(()=>{
        const  darw_el = this.$refs.canvasbox;
        console.info(darw_el)
        //颜色取值不支持#ccc #f60 十六进制颜色 不支持缩写
       this.circleFun(darw_el,this.colorNum,this.percent,this.bgWidth,this.fWidth,this.bgColor,this.textColor,this.istext,this.direction,this.startC,this.endC,this.colorC)
    },200)
},

//定义变量
var rect = draw_item.getBoundingClientRect();
var context = draw_item.getContext('2d');
var center_x = (rect.width)/2;
var center_y = (rect.height)/2;
var rad = (Math.PI *2) /100;
var speed = 0;

// 绘制后面的圈圈
function  backCircle(){
    context.save()
    context.beginPath()
    context.lineWidth = lineWidth_b // 设置线宽
    var radius = center_x - context.lineWidth //设置半径
    context.lineCap = 'round' //结尾形状
    context.strokeStyle = color_b //线条颜色
    context.arc(center_x, center_y, radius, 0, Math.PI * 2, false)
    context.stroke()
    context.closePath()
    context.restore()
}

//绘制前面的圈圈
function  foceCircle(n){
    context.save()
    //context.strokeStyle = color_f //决定圆环颜色
    context.lineWidth = lineWidth_f;//前面动态圈宽度
    context.lineCap = 'round';//结尾形状
    var radius = center_x - context.lineWidth;//半径
    context.beginPath()
    if (colornums == 1) {
        context.strokeStyle = Color_C
    }
    if (colornums == 2) {
        //创建渐变对象，渐变开始点和渐变结束点
        let g = context.createLinearGradient(0, 90, 90, 0); 
        g.addColorStop(0, start_C); //添加颜色点
        g.addColorStop(1, end_C); //添加颜色点
        context.strokeStyle = g; //使用渐变对象作为圆环的颜色
    }
    //用于绘制圆弧context.arc(x坐标，y坐标，半径，起始角度，终止角度，顺时针/逆时针)
    //context.arc(center_x,center_y,radius, -Math.PI / 4,-Math.PI / 4 + n * rad,direct )
    context.arc(center_x,center_y,radius, Math.PI / 20, n*rad, direct )
    context.stroke()
    context.closePath()
    context.restore()
}

//绘制文字
function text(n) {
    context.save();
    context.fillStyle = color_f; //文字颜色
    var font_size = 20 ;//字体大小
    context.font = font_size + 'px Helvetica' //字体大小和文字形状
    var text_width = context.measureText(n.toFixed(0) + '%').width;//文字宽度
    context.fillText(n.toFixed(0) + '%', center_x - text_width / 2, center_y + font_size / 2)
    context.restore()
}

//执行动画
(function drawFrame() {
    if (speed <= percent) {
        requestAnimationFrame(drawFrame)
    } else {
        return false
    }
    context.clearRect(0, 0, rect.width, rect.height)
    //context.globalCompositeOperation = "copy"
    backCircle();
    //控制百分比文字显示、隐藏
    if(textshow){
        text(speed);
    }
    foceCircle(speed);
    if (speed >= percent) {
        speed ++
    } else {
        speed += 1
    }
})()