canvas实现圆形进度条

作者: 雅玲哑铃 | 来源:发表于2018-12-10 22:57 被阅读11次

小程序原型进度条
canvas实现圆形进度条
Canvas实现的圆形时间进度条
圆形进度条
Android自定义圆形进度条学习
iOS 各种圆形进度条
canvas实现圆形进度条动画
Android圆形进度条自定义
实现圆形进度条svg&css
android 圆形进度条

先看一下效果图

屏幕快照 2018-12-10 下午10.54.23.png

屏幕快照 2018-12-10 下午10.54.13.png

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            canvas{
                border:1px solid red;
            }
        </style>
    </head>
    <body>
        <canvas id="mycanvas" width="400" height="400">
            80%
        </canvas>
    </body>
    <script type="text/javascript">
        var canvas = document.getElementById("mycanvas");
        var context = canvas.getContext("2d");
        function draw(percent){
            context.beginPath();
            context.arc(50,50,50,0,Math.PI*2);
            context.strokeStyle = "red";
//          context.lineWidth = 1;
            context.stroke();
            //进度圆
            context.beginPath();
            var per = 2*Math.PI/100*percent;
            context.arc(50,50,40,0,per);
            context.lineWidth = 8;
            var grd = context.createLinearGradient(0,0,100,0);
            grd.addColorStop(0,"blue");
            grd.addColorStop(0.5,"yellow");
            grd.addColorStop(1,"green");
            context.strokeStyle = grd;
            context.stroke();
        }
        function drawText(text){
            context.textAlign = "center";
            context.textBaseline = "middle";
            context.font = "bold 20px 微软雅黑";
            context.strokeStyle = "orangered";
            context.lineWidth = 2;
            context.strokeText(text,50,50);
            context.stroke();
        }
        var start = 0;
        setInterval(function(){
            //清空画布
            context.clearRect(0,0,canvas.width,canvas.height);
            var percentText = canvas.innerHTML;
            console.log("("+percentText+")");  //有空格
            percentText = percentText.trim();  //去掉首尾空格
            //去掉百分号
            percentText = percentText.substr(0,percentText.length-1);
            start++;
            if(start>=~~percentText){
                start=~~percentText;
            }
            console.log(percentText);
            console.log(typeof ~~percentText);
            draw(start);
            drawText(start+"%");
        },100)
    </script>
</html>

干货免费学习啦，哪里不懂可以私信我，一起进步哈！