canvas实现百分比&扇形效果

最新推荐文章于 2022-05-07 09:25:48 发布

本地是好的

最新推荐文章于 2022-05-07 09:25:48 发布

阅读量1.2k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： H5 文章标签： canvas实例

本文链接：https://blog.youkuaiyun.com/qq_40958876/article/details/95076441

H5 专栏收录该内容

5 篇文章

订阅专栏

本文介绍如何使用HTML5的Canvas元素绘制一个动态更新的百分比环形图，通过JavaScript控制动画效果，实现从0%到100%的渐进填充过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

<!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>
    <div class="wrap">
        <canvas width="400" height="400" id="vas" style="background: gray;"></canvas>
    </div>
    <script>
        var can = document.getElementById('vas');
        var ctx = can.getContext('2d');
        rad = Math.PI * 2 / 100;//将360度分成100份
        // 画圆
        function circle() {
            ctx.beginPath();
            ctx.arc(200, 200, 100, 0, Math.PI * 2, false);
            ctx.closePath();
            ctx.fillStyle = 'green';
            ctx.fill();
        }

        // 百分比
        function text(n) {
            ctx.save();
            // ctx.strokeStyle = "orangered";
            ctx.font = "40px Arial";
            ctx.fillStyle = "#fff";
            ctx.fillText(n + "%", 200 - 35, 200 + 10);
            // ctx.fill();
            ctx.restore();
        }
        // 画圆弧
        var val = 1;
        ctx.beginPath();
        ctx.moveTo(200, 200);
        ctx.arc(200, 200, 100, 0, rad, false);
        ctx.closePath();
        ctx.fillStyle = 'red';
        ctx.fill();
        (function draw() {
            val++;
            circle()
            ctx.beginPath();
            ctx.moveTo(200, 200);
            ctx.arc(200, 200, 100, 0, val * rad, false);
            ctx.closePath();
            ctx.fillStyle = 'red';
            ctx.fill();
            // console.log(val);
            text(val);
            if (val >= 100) {
                val = 0;
            }
            requestAnimationFrame(draw);

        })();

    </script>
</body>

</html>