使用canvas实现带圆点的进度条

最新推荐文章于 2024-08-15 10:23:35 发布

向上爬的蜗牛

最新推荐文章于 2024-08-15 10:23:35 发布

阅读量2.1k

点赞数 1

分类专栏： web前端文章标签： canvas html5 进度条

本文链接：https://blog.csdn.net/abld99/article/details/50886937

版权

web前端专栏收录该内容

23 篇文章 0 订阅

订阅专栏

使用canvas实现如上图所示的进度条

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Canvas实现圆点进度条</title>
    <style>
        .canvasArea{ margin:200px auto; height:400px; width:400px; position: relative; padding:10px; }
        .canvasArea p{ position:absolute; width:100%; height: 100%; line-height:400px; text-align:center; font-size:24px;}
        canvas{ position: absolute; width: 100%; height: 100%; top: 0; left: 0; }
        #perValue{ font-weight:bold; color:red; padding-right:10px;}
    </style>
</head>
<body>
<div class="canvasArea" style="">
    <p><span id="perValue">0</span></p>
    <canvas width="400" height="400" id="mask" style="z-index:9"></canvas>
    <canvas width="400" height="400" id="bg"></canvas>
    <canvas width="400" height="400" id="circle" style="z-index:10"></canvas>
</div>

<script type="text/javascript">
(function(){
    var progress = {
        bgid:null,
        maskid:null,
        circleid:null,
        x:0,
        y:0,
        radius:0,
        perV:0,
        load:0,
        bgctx:null,
        maskctx:null,
        circlectx:null,

        init:function(paramObj){
            this.bgid = paramObj.bgid;
            this.maskid = paramObj.maskid;
            this.circleid = paramObj.circleid;
            this.x = paramObj.x;
            this.y = paramObj.y;
            this.radius = paramObj.radius;
            this.perV = paramObj.perV;
            this.load = paramObj.initLoaded;

            bgctx = document.querySelector(this.bgid).getContext("2d");
            circlectx = document.querySelector(this.circleid).getContext("2d");
            maskctx = document.querySelector(this.maskid).getContext("2d");

        },

        drawBgLayer:function(){
            bgctx.beginPath();
            bgctx.lineWidth = 8;
            bgctx.strokeStyle = "#e5e5e5";
            bgctx.arc(this.x, this.y, this.radius, (5/6)*Math.PI, (1/6) * Math.PI, false);
            bgctx.stroke();
        },
        drawMaskLayer:function(){
            var draw = setInterval(function(){
                if (progress.load<=progress.perV) {
                    progress.drawCircle();
                    progress.load += 1;
                } else {
                    clearInterval(draw);
                    draw = null;
                }
            }, 10);
        },
        drawCircle:function(){
            document.querySelector("#perValue").innerHTML = this.load;
            var vv = this.load/100*(4/3)+(5/6);
            if(vv>2){
                vv = vv-2;
            }
            var loaded = vv*Math.PI;
            maskctx.clearRect (0,0,400,400);
            maskctx.beginPath();
            maskctx.lineWidth = 8;
            maskctx.strokeStyle = '#00acee';
            maskctx.arc(this.x, this.y, this.radius, (5/6)*Math.PI, loaded, false);
            maskctx.stroke();

            var para = vv*3.14;
            var px = this.x+this.radius*Math.cos(para-0.03);
            var py = this.y+this.radius*Math.sin(para-0.03);
            circlectx.clearRect (0,0,400,400);
            circlectx.beginPath();
            circlectx.arc(px,py,8,0,360,false);
            circlectx.fillStyle = '#00acee';
            circlectx.fill();
        }
    }

    var paramObj = {
        bgid:'#bg',
        maskid:'#mask',
        circleid:'#circle',
        x:200,
        y:200,
        radius:180,
        perV:80,
        initLoaded:0,
    }
    progress.init(paramObj);
    progress.drawBgLayer();
    progress.drawMaskLayer();
})();
</script>
</body>
</html>

主要的难点在于进度条上的那个圆点，要跟据圆心坐标和半径以及圆心角度计算出那个圆点的圆心坐标来；

另附上求圆上任意一点坐标的公式：