HTML新颖的与用户交互的背景代码，亲测可用，炫酷独家！

最新推荐文章于 2024-05-16 23:45:00 发布

CZ工作室官方

最新推荐文章于 2024-05-16 23:45:00 发布

阅读量274

点赞数 1

分类专栏： CZ代码 CZ工作室原创新手小白教程新手小白教程【CZ工作室】文章标签： html 算法前端

本文链接：https://blog.csdn.net/chenzhi0122/article/details/131390078

版权

CZ代码同时被 3 个专栏收录

16 篇文章 4 订阅

订阅专栏

新手小白教程【CZ工作室】

13 篇文章 0 订阅

订阅专栏

CZ工作室原创新手小白教程

8 篇文章 0 订阅

订阅专栏

话不多说看代码，觉得好还请一键三联，万分感谢！

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

<head>
    <meta charset="UTF-8">
    <title>CZ工作室-鼠标屏幕互动动画</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        
        #canvas {
            background: #000;
        }
    </style>
</head>

<body>
    <canvas id="canvas"></canvas>
    <script>
        var canvas = document.getElementById('canvas'),
            ctx = canvas.getContext('2d'),
            WIDTH = canvas.width = document.documentElement.clientWidth,
            HEIGHT = canvas.height = document.documentElement.clientHeight,
            para = {
                num: 100,
                color: false,
                radius: 0.9,
                o: 0.09, 
            },
            color,
            circleColor,
            round_arr = [];

        window.onmousemove = function(event) {
            X = event.clientX
            Y = event.clientY

            round_arr.push({
                X: X,
                Y: Y,
                radius: para.radius,
                o: 1
            })
        }


        if (para.color) {
            circleColor = para.color
        } else {
            color = Math.random() * 360
        }

        function animate() {
            if (!para.color) {
                color += .1
                circleColor = 'hsl(' + color + ',100%,80%)'
            }

            ctx.clearRect(0, 0, WIDTH, HEIGHT) 

            for (var i = 0; i < round_arr.length; i++) {
                ctx.fillStyle = circleColor
                ctx.beginPath()
                ctx.arc(round_arr[i].X, round_arr[i].Y, round_arr[i].radius, 0, Math.PI * 2)
                ctx.closePath() 
                ctx.fill()
                round_arr[i].radius += para.radius 
                round_arr[i].o -= para.o

                if (round_arr[i].o <= 0) {
                    round_arr.splice(i, 1);
                    i--;
                }
            }

            window.requestAnimationFrame(animate)
        }

        animate()
    </script>
</body>

</html>