Canvas制作颗粒背景

效果如下图：

JS：

<script>
        var canvas = document.getElementById("myCanvas");
        canvas.width = document.documentElement.clientWidth;
        canvas.height = document.documentElement.clientHeight;
        var ctx = canvas.getContext("2d");
        //创建小球的构造函数
        function Ball() {
            this.x = randomNum(3, canvas.width - 3);
            this.y = randomNum(3, canvas.height - 3);
            // 小球半径
            this.r = randomNum(1, 20);
            this.color = randomColor();
            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 = [];
        //创建200个小球
        for (var i = 0; i < 90; 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 = e;
            mouseX = ev.offsetX;
            mouseY = ev.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 = randomColor();
                            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 = "red";
                    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>

html:

<canvas id="myCanvas"></canvas>

在react框架中使用：封装成组件

canvas-particle.js:

import React, { Component } from "react";
class Particle extends Component {
    constructor(props) {
        super(props)
        this.initCanvas = this.initCanvas.bind(this)
    }
    initCanvas() {
        var canvas = document.getElementById("myCanvas");
        canvas.width = document.documentElement.clientWidth;
        canvas.height = document.documentElement.clientHeight;
        var ctx = canvas.getContext("2d");
        //创建小球的构造函数
        function Ball() {
            this.x = randomNum(3, canvas.width - 3);
            this.y = randomNum(3, canvas.height - 3);
            this.r = randomNum(1, 3);
            this.color = randomColor();
            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 = [];
        //创建200个小球
        for (var i = 0; i < 90; 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 =  e;
            mouseX = ev.offsetX;
            mouseY = ev.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 = randomColor();
                            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 = "red";
                    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) + ")";
        }
    }

    componentDidMount() {
        this.initCanvas()
      }
      componentDidUpdate() {
        this.initCanvas()
      }
    render() {
        return <canvas id="myCanvas" style={{ position: "absolute" ,left:"0",right:"0",height:"100%",width:"100%"}}></canvas>
    }
}
export default Particle