svg + canvas 实现流光动画

callBack_____

于 2024-09-27 10:36:57 发布

阅读量208

点赞数 3

文章标签： javascript 前端

本文链接：https://blog.csdn.net/callBack_____/article/details/142587653

版权

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- <object data="http://36.154.85.178:9700/openPage?ID=5BD7F0E6DA1B449EB2F2C07E4E4383F8" 
    width="100%" 
    height="800" 
    type="text/html">
    </object> -->



    <canvas id="canvas" width="1000" height="1000" style="width: 100vh;height: 80vh;"></canvas>
    <!-- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="400" height="400">
        <path d="M527.5000 237.0000 
        C570.8543 237.0000 606.0000 215.5097 606.0000 189.0000
        C606.0000 162.4903 570.8543 141.0000 527.5000 141.0000
        C484.1457 141.0000 449.0000 162.4903 449.0000 189.0000
        C449.0000 215.5097 484.1457 237.0000 527.5000 237.0000" fill="none" stroke-width="5" stroke="blue">
        </path>
    </svg> -->
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="400" height="400">
        <path stroke-width="1.5" d="M957,87.32C957,87.32,693,90.82,600.19,78.86C507.3800000000001,66.9,510.68000000000006,50.230000000000004,503.45000000000005,43.86C496.22,37.489999999999995,494.83000000000004,24.4,416.72,17.73C338.61,11.060000000000002,255.2,-2.31,0,1" stroke="none" fill="none" filter=""></path>
    </svg>


    
    <script>
        const canvas = document.getElementById("canvas");
        const ctx = canvas.getContext("2d");

        const pathElement = document.querySelector('path');
        const path = pathElement.getAttribute('d');

        const strokePath = new Path2D(path);
        ctx.stroke(strokePath);

        // 1.获取路线总长度
        const pathLength = pathElement.getTotalLength();

        // 2. 获取路线起点的坐标
        const { x, y } = pathElement.getPointAtLength(0);


        let position = 0;
        function move() {
            // // 首先先要把画布擦干净
            ctx.clearRect(0, 0, 1000, 1000);
            // 获取xy坐标
            for (let index = 0; index < 155; index++) {
                if (position > 0) {
                    const { x, y } = pathElement.getPointAtLength(position - index);
                    // 绘制小球
                    ctx.fillStyle = '#75AAFF';//填充颜色-实心圆
                    // ctx.globalCompositeOperation = 'lighter'
                    ctx.fill();//画实心圆
                    ctx.beginPath();
                    ctx.arc(x, y, 1, 0, Math.PI * 2)
                } else {
                    const { x, y } = pathElement.getPointAtLength(position);
                    // 绘制小球
                    ctx.fillStyle = '#75AAFF';//填充颜色-实心圆
                    ctx.globalCompositeOperation = 'lighter'
                    ctx.fill();//画实心圆
                    ctx.beginPath();
                    ctx.arc(x, y, 1, 0, Math.PI * 2)
                }
            }



            // 更新位移的长度

            if (position > pathLength) {
                position = 0
            }
            position += 7;
            // 在这里调用requestAnimationFrame方法，将move函数传进去，就可以实现循环调用了。
            requestAnimationFrame(move);
        }

        move();



    </script>
</body>

</html>