如何使用canvas同时绘制多个并列进度条

先上效果：

主要是去熟悉下canvas的一些属性方法，主要应用的属性方法如下：

beginPath() 方法：开始一条路径，或重置当前的路径；

closePath()方法：与上面的匹配，创建从当前点到开始点的路径；

moveTo(x,y)方法：开始一条路径，移动到位置（x,y）；

arc(x,y,r,Math.PI * 1.5, Math.PI * (1.5 + 2 * percent / 100 ))：创建弧/曲线（用于创建圆或部分圆）圆的中心的 x 坐标,y坐标，圆形半径，起始角（以弧度计），结束角（以弧度计）；

文本类属性

.fillStyle：设置或返回用于填充绘画的颜色、渐变或模式

.fill()：填充当前的图像（路径）。默认颜色是黑色（使用 fillStyle 属性来填充另一种颜色/渐变）；

.textAlign：文本位置；.font：文字属性；textBaseline：设置或返回在绘制文本时的当前文本基线；

.fillText(text,x,y)：在位置（x,y）处显示text内容

具体代码实现：

<div class="warn-canvas"></div>

//分辨率自适应调整
    var canvas_left = 80;//圆环的偏移位置
    var canvas_height = 100;//圆环的环境大小
    if($(window).width()>1599){
        canvas_left = 100;
        canvas_height = 140;
       }
    //红（80），橙，黄，蓝
    
    var colorarr = ["#f14a65","#ffa042","#ffff69","#5a7ef3"];
    var txtarr = ["致命","错误","警告","信息"];
    $(function(){
        var str = "";
        for(var i=0;i<4;i++){
            str+="<canvas id='process"+i+"' width='"+canvas_height+"' height='100'></canvas>"
        }
        $(".warn-canvas").html(str);
        for(var j=0;j<4;j++){
            var process = 0;
            var ctx = document.getElementById("process"+j).getContext('2d');
            // 画灰色的圆
            ctx.beginPath();
            ctx.arc(canvas_left, 30, 20, 0, Math.PI*2);
            ctx.closePath();
            ctx.fillStyle = '#def3ff';
            ctx.fill();
            var per = j*20;
            animate(per,ctx,process,j);
        }

    });
    function animate(per,ctx,process,i){
        requestAnimationFrame(function (){
            process = process + 1;
            drawCricle(ctx, process,i);
            //绘制图形的百分比（per）
            if (process < per) {
                animate(per,ctx,process,i);
            }
        });
    }

    function drawCricle(ctx, percent,i){
        
        // 画进度环
        ctx.beginPath();
        //开始一条路径，移动到位置 100,100
        ctx.moveTo(canvas_left, 30);
        //创建弧/曲线（用于创建圆或部分圆）圆的中心的 x 坐标,y坐标，圆形半径，起始角（以弧度计），结束角（以弧度计）
        ctx.arc(canvas_left, 30, 20, Math.PI * 1.5, Math.PI * (1.5 + 2 * percent / 100 ));
        ctx.closePath();
        ctx.fillStyle = colorarr[i];
        ctx.fill();

        // 画内填充圆
        ctx.beginPath();
        ctx.arc(canvas_left, 30, 14, 0, Math.PI * 2);
        ctx.closePath();
        ctx.fillStyle = '#fff';
        ctx.fill();

        // 填充文字1
        ctx.font = "10pt Microsoft YaHei";
        ctx.fillStyle = '#929292';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        ctx.moveTo(20, 50);
        ctx.fillText(txtarr[i], 25, 20);
        ctx.fillText("0", 25, 40);
    }

期待各位读者的宝贵意见。

转载于:https://www.cnblogs.com/b-code/p/9355973.html