实现一个简单的圆环图并动态绘制

最新推荐文章于 2024-07-20 23:54:17 发布

qq_28695495

最新推荐文章于 2024-07-20 23:54:17 发布

阅读量260

点赞数 1

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/qq_28695495/article/details/136173208

版权

本文介绍了一段HTML5代码，通过CanvasAPI实现在网页上动态绘制不同颜色的圆形，并通过JavaScript控制圆环的动态变化。

摘要由CSDN通过智能技术生成

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #myCanvas {
            position: absolute;
            top: 100px;
            left: 100px;
            border: 1px solid gray;
        }
    </style>
</head>

<body>
    <canvas id="myCanvas" width="200" height="100"></canvas>
</body>
<script type="text/javascript">
    // myCanvas
    var c = document.getElementById("myCanvas");
    var cxt = c.getContext("2d");
    function setCircle(diff, color) {
        cxt.beginPath(140, 50);
        // 指定 坐标 x y  半径  圆环的起始位置、最终位置 、时针方向
        cxt.arc(150, 50, 40, Math.PI * .8, Math.PI * diff, false);
        // cxt.fillStyle = "#FF0000"; // 填充样式搭配fill
        cxt.strokeStyle = color
        cxt.lineWidth = 5; // 线的宽度，搭配stroke
        cxt.stroke()
        // cxt.fill();
        cxt.closePath();
    }

    setCircle(.2, '#efefef')


    var targetPos = 2
    // 动态渲染图表
    var curPos = .8 // 设置绘制画布时的初始位置
    var timer = setInterval(function () {
        if (curPos >= targetPos) {
            clearInterval(timer)
        }
        curPos = curPos + 0.01 // 更新当前位置
        setCircle(curPos, '#FF0000') // 基于最新的位置设置图形
    }, 10)
</script>

</html>

效果如下：