圆形进度条效果

Ysiqiqi

2018-02-08

jquery和canvas制作圆形进度条效果

点击提交按钮，生成提交圆环进度样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>进度条</title>
    <style type="text/css">
        /*CSS源代码*/
        button{

            display:inline-block;
            padding:10px 28px;
            margin-top:50px;
            margin-left:50px;
            font-size:18px;
            font-weight:normal;
            text-align:center;
            border:2px solid #1aba9c;
            border-radius:4px;
            color:#1aba9c;
            background:#ffffff;


        }
        button:hover{
            color:#ffffff;
            background:#1aba9c;
        }


    </style>
</head>
<body>
<!-- HTML代码片段中请勿添加<body>标签 //-->
<button type="button">提交</button>
<canvas id="c" width="400" height="200"></canvas>



    <!-- 推荐开源CDN来选取需引用的外部JS //-->
    <script type="text/javascript" src="http://cdn.gbtags.com/jquery/1.11.1/jquery.min.js"></script>
    <script>
        /*Javascript代码片段*/
        $("button").click(function(){
            $(this).hide();
            var i = 0;
            if (i == 0) {
                var time = setInterval(
                        function(){
                            ++i;
                            schedule(i);
                            if (i >= 100) {
                                clearInterval(time);
                                $("canvas").hide();
                                $("button").fadeIn();
                                return;
                            }}, 30);

            }


        });



        function schedule(vlaue){
            var process =vlaue;
            var canvas=document.getElementById("c");
            var context = canvas.getContext('2d');

            context.clearRect(0, 0, 200, 200);
            //开始画一个灰色的圆
            context.beginPath();
            // 坐标移动到圆心
            context.moveTo(100, 100);
            context.arc(100, 100, 50, 0, Math.PI * 2, false);
            context.closePath();
            // 填充颜色
            context.fillStyle = '#ddd';
            context.fill();

            // 画扇形
            context.beginPath();
            context.moveTo(100, 100);
            context.arc(100, 100,50,1.5*Math.PI, Math.PI * 2 * process / 100+1.5*Math.PI);

            //填充颜色
            context.closePath();
            context.fillStyle = '#1aba9C';
            context.fill();
            //画掏空心
            context.beginPath();
            context.moveTo(100, 100);
            context.arc(100, 100, 40, 0, Math.PI * 2);
            context.closePath();
            context.fillStyle = 'rgb(255,255,255)';
            context.fill();

            //在中间写字
            context.font = " 22px Arial";
            context.fillStyle = '#1aba9C';
            context.textAlign = 'center';
            context.textBaseline = 'middle';
            context.moveTo(100, 100);
            context.fillText(process+"%", 100, 100);
        }



    </script>
</body>
</html>

context