canvas绘制圆形进度条

最新推荐文章于 2024-07-09 12:45:23 发布

熊熊之熊熊烈火

最新推荐文章于 2024-07-09 12:45:23 发布

阅读量338

点赞数

本文链接：https://blog.youkuaiyun.com/mingrenc/article/details/79141904

版权

<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="UTF-8">  
        <title>绘制圆环进度条</title>  
    </head>  
    <body>  
        <div>  
            <canvas id="myCanvas"></canvas>  
        </div>  
        <script type="text/javascript" src="common/IOTutils/IOTUtilities.js"></script>
        <script type="text/javascript">  
            function drawRing(w,h,val,minute,second,status){  
                //先创建一个canvas画布对象，设置宽高  
                var c=document.getElementById('myCanvas');  
                var ctx=c.getContext('2d');  
                ctx.canvas.width=w;  
                ctx.canvas.height=h;  
                //圆环有两部分组成，底部灰色完整的环，根据百分比变化的环  
                //先绘制底部完整的环  
                //起始一条路径  
                ctx.beginPath();  
                //设置当前线条的宽度  
                ctx.lineWidth=5;//10px  
                //设置笔触的颜色  
                ctx.strokeStyle='#CCCCCC';  
                //arc()方法创建弧/曲线（用于创建圆或部分圆）arc(圆心x,圆心y,半径,开始角度,结束角度)  
                ctx.arc(100,100,97,0,2*Math.PI);            
                //绘制已定义的路径  
                ctx.stroke();  
                  
                //绘制根据百分比变动的环  
                ctx.beginPath();  
                ctx.lineWidth=5;  
                ctx.strokeStyle='#3CADFF';  
                //设置开始处为0点钟方向（-90*Math.PI/180）  
                //x为百分比值（0-100）  
                ctx.arc(100,100,97,-90*Math.PI/180,(val*3.6-90)*Math.PI/180);  
                ctx.stroke();  
                //绘制中间的文字  
                ctx.font='14px PingFangSC-Regular';  
                ctx.fillStyle='#898989 100%';  
                ctx.textBaseline='middle';  
                ctx.textAlign='center';  
                //ctx.fillText(val+'%',100,50);
                ctx.fillText('剩余时间',100,50); 
                
                ctx.font='36px DISPLAYFREETFB';  
                ctx.fillStyle='#4A4A4A 100%';  
                ctx.textBaseline='middle';  
                ctx.textAlign='center';
                
                ctx.fillText(minute+':'+second,100,90); 
                
                ctx.font='14px PingFangSC-Regular';  
                ctx.fillStyle='#898989 100%';  
                ctx.textBaseline='middle';  
                ctx.textAlign='center';
                
                ctx.fillText('(min)',100,125); 
                ctx.font='14px PingFangSC-Regular';  
                ctx.fillStyle='#898989 100%';  
                ctx.textBaseline='middle';  
                ctx.textAlign='center';
                
                ctx.fillText(status,100,160);
            }  
           drawRing(200,200,76,4,40,30,"运行中");  
         
        </script>  
    </body>  
</html>

效果: