canvas实现的loading效果

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

若～～～

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

阅读量915

点赞数

分类专栏： canvas 文章标签： canvas

本文链接：https://blog.csdn.net/weixin_44369568/article/details/105417257

版权

canvas 专栏收录该内容

3 篇文章 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>Document</title>
</head> 
<body>
    <canvas id="myCanvas" width="600" height="600" style="border:1px solid red"></canvas>
    <script>
        var ctx = myCanvas.getContext('2d');
        var deg = Math.PI / 180;
        var index = 0; 
        fram() 
        function fram() {
            index++;
            if (index <= 360) {
                requestAnimationFrame(fram)
            }
            var txt = Math.round(index / 360 * 100);
            ctx.beginPath();
            ctx.clearRect(0, 0, 600, 600);
            ctx.arc(300, 300, 200, 0, index * deg);
            ctx.strokeStyle = "pink";
            ctx.lineWidth = 10;
            ctx.stroke();
            ctx.beginPath();
            ctx.lineWidth = 1;
            ctx.strokeText(txt + "%", 300, 300);
            ctx.font = '30px normal';
            ctx.textAlign = "center";
            ctx.textBaseline = "middle";
            ctx.closePath();
        }
    </script>
</body>

</html>