Canvas实现网页星空背景粒子动效跟随光标

ღ冷风20°C᭄ꦿ࿐

已于 2022-05-30 23:26:04 修改

阅读量2k

点赞数 5

于 2022-05-29 23:53:39 首次发布

本文链接：https://blog.csdn.net/weixin_50241387/article/details/125038394

版权

vue 同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

HTML

4 篇文章 1 订阅

订阅专栏

目录

1. 设计思路

2. 星空背景图片

3. 页面代码

4. 效果图

1. 设计思路

1. 利用样式插入星空背景图片；

2.设置窗口改变时自动修改画布大小(自适应)；

3. 编写随机函数(随机数、随机颜色等)；

4. 创建小球的构造函数(坐标、半径、颜色)；

5. 绘制小球等；

6. 设置小球移动(设置边界，让小球始终保证在画面内)；

7. 创建小球实例并存储(小球总个数)；

8. 设计鼠标移动绘制线；

9. 设计小球与小球之间自动画线；

10. 界面不断进行绘制和清除(使用关键帧动画)；

11. 添加鼠标移动事件；

12. 判断是否划线(设置小球之间距离)；

13. 使用鼠标移动划线；

2. 星空背景图片

background.jpg

3. 页面代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas实现网页星空背景粒子动效跟随光标</title>
    <style>
        #myCanvas{
            background: url("/images/background.jpg");
        }
    </style>
</head>
<body>
    <div>
        <canvas id="myCanvas"></canvas>
    </div>
    <script>
        var canvas = document.getElementById("myCanvas");
        //   canvas.width = document.documentElement.clientWidth;
        //   canvas.height = document.documentElement.clientHeight;
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
        var ctx = canvas.getContext("2d");

        //窗口改变时修改画布大小
        window.onresize = function () {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
        };

        //创建小球的构造函数
        function Ball() {
            //横纵坐标
            this.x = randomNum(3, canvas.width - 3);
            this.y = randomNum(3, canvas.height - 3);
            //半径
            this.r = randomNum(2, 5);
            // this.color = randomColor();
            //颜色
            this.color="#7ec7fd";
            //平移速度，正负区间是为了移动方向的多样性
            this.speedX = randomNum(-3, 3) * 0.2;
            this.speedY = randomNum(-3, 3) * 0.2;
        }
        Ball.prototype = {
            //绘制小球
            draw: function () {
                ctx.beginPath();
                ctx.globalAlpha = 1;
                ctx.fillStyle = this.color;
                ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2);
                ctx.fill();
            },
            //小球移动
            move: function () {
                this.x += this.speedX;
                this.y += this.speedY;
                //为了合理性,设置极限值(判断边界值，让圆球始终保证在画面内)
                if (this.x <= 3 || this.x > canvas.width - 3) {
                    this.speedX *= -1;
                }
                if (this.y <= 3 || this.y >= canvas.height - 3) {
                    this.speedY *= -1;
                }
            },
        };
        //存储所有的小球
        var balls = [];
        //创建100个小球
        for (var i = 0; i < 100; i++) {
            var ball = new Ball();
            balls.push(ball);
        }
        main();

        function main() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            //鼠标移动绘制线
            mouseLine();
            //小球与小球之间自动画线
            drawLine();
            //使用关键帧动画，不断的绘制和清除
            window.requestAnimationFrame(main);
        }
        //添加鼠标移动事件
        //记录鼠标移动时的mouseX坐标
        var mouseX;
        var mouseY;
        canvas.onmousemove = function (e) {
            // var ev = event || e;
            mouseX = e.offsetX;
            mouseY = e.offsetY;
        };
        //判断是否划线

        function drawLine() {
            for (var i = 0; i < balls.length; i++) {
                balls[i].draw();
                balls[i].move();
                for (var j = 0; j < balls.length; j++) {
                    if (i != j) {
                        if (
                            Math.sqrt(
                                Math.pow(balls[i].x - balls[j].x, 2) +
                                Math.pow(balls[i].y - balls[j].y, 2)
                            ) < 80
                        ) {
                            ctx.beginPath();
                            ctx.moveTo(balls[i].x, balls[i].y);
                            ctx.lineTo(balls[j].x, balls[j].y);
                            ctx.strokeStyle = "white";
                            ctx.globalAlpha = 0.2;
                            ctx.stroke();
                        }
                    }
                }
            }
        }
        //使用鼠标移动划线
        function mouseLine() {
            for (var i = 0; i < balls.length; i++) {
                if (
                    Math.sqrt(
                        Math.pow(balls[i].x - mouseX, 2) +
                        Math.pow(balls[i].y - mouseY, 2)
                    ) < 80
                ) {
                    ctx.beginPath();
                    ctx.moveTo(balls[i].x, balls[i].y);
                    ctx.lineTo(mouseX, mouseY);
                    ctx.strokeStyle = "white";
                    ctx.globalAlpha = 0.8;
                    ctx.stroke();
                }
            }
        }
        //随机函数
        function randomNum(m, n) {
            return Math.floor(Math.random() * (n - m + 1) + m);
        }
        //随机颜色
        function randomColor() {
            return (
                "rgb(" +
                randomNum(0, 255) +
                "," +
                randomNum(0, 255) +
                "," +
                randomNum(0, 255) +
                ")"
            );
        }
    </script>
</body>
</html>