canvas实现loading的效果

最新推荐文章于 2022-08-19 11:16:59 发布

竹节虫T

最新推荐文章于 2022-08-19 11:16:59 发布

阅读量995

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_43623871/article/details/99237838

版权

前端专栏收录该内容

61 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>canvas实现loading</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        #box{
           width: 500px; 
           height: 500px;
           text-align: center;
           font-size: 20px;
           font-weight: 700;
           color: red;
        }
    </style>
</head>

<body>
    <canvas id="can" height="500px;" width="500px"></canvas>
    <div id="box"></div>
    <script>
        var can = document.getElementById("can");
        var oBox = document.getElementById('box');
        var ctx = can.getContext('2d');
        CanvasRenderingContext2D.prototype.sector = function (x, y, r, sDeg, eDeg) {
            //圆心点，半径，角度，起始角度，终止角度
            this.save();
            this.beginPath();
            this.moveTo(x, y);
            //角度=》弧度
            this.arc(x, y, r, sDeg * Math.PI / 180, eDeg * Math.PI / 180, false);
            this.closePath();
            this.restore();
            return this;
        }
        var timer;
        var angle = 0;
        var per;
        //  angle / 360 = per / 100
        //  5 * angle / 18
        ctx.fillStyle = 'red';
        timer = setInterval(() => {
            angle += 5;
            ctx.sector(250, 250, 100, 0, angle).fill();
            per = (5 * angle / 18).toFixed(2);
            oBox.innerHTML = "加载中" + per + "%";
            if (angle === 360) {
                clearInterval(timer);
                oBox.innerHTML = "加载完成！";
            }
        }, 200);
    </script>
</body>

</html>