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

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>

4. 效果图

 效果图是动态的,不断随机生成/销毁星空小球,鼠标移动可进行连线!

  • 5
    点赞
  • 37
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值