前端开发网站效果:星空连线背景

网站前端程序制作开发|关于网站前端开发的论文|视频网站的前端开发

星空连线背景

<!DOCTYPE html>
<html lang=”en”>
<head>
    <meta charset=”UTF-8″>
    <title>canvas星空连线背景</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        #canvas {
            background: #000;
            display: block;
        }
    </style>
</head>
<body>
    <canvas id=”canvas”></canvas>
    <script>
        window.onload = function () {
            //命名空间
            var Canvas = {};
            Canvas.animate = {
                //初始化
                init: function () {
                    var canvas = document.getElementById(‘canvas’);
                    this.cxt = canvas.getContext(“2d”);//2d绘图环境 画笔
                    canvas.width = window.innerWidth;
                    canvas.height = window.innerHeight;
                    this.cw = canvas.width;
                    this.ch = canvas.height;
                    this.num = 200;
                    this.data = [];
                    for (var i = 0; i < this.num; i++) {
                        this.data[i] = {
                            x: Math.random() * this.cw,
                            y: Math.random() * this.ch,
                            cX: Math.random() * 0.6 – 0.3,
                            cY: Math.random() * 0.6 – 0.3
                        }
                        this.drawCircle(this.data[i].x, this.data[i].y);
                    }
                },
                //绘制粉色小点
                drawCircle: function (x, y) {
                    var cxt = this.cxt;
                    cxt.save();
                    cxt.fillStyle = “pink”;
                    cxt.beginPath();
                    cxt.arc(x, y, 0.5, 0, Math.PI * 2, false);
                    cxt.closePath();
                    cxt.fill();
                    cxt.restore();
                },
                //绘制线条
                drawLine: function (x1, y1, x2, y2) {
                    var cxt = this.cxt;
                    var color = cxt.createLinearGradient(x1, y1, x2, y2);
                    color.addColorStop(0, “#fff”);
                    color.addColorStop(0.5, “green”);
                    color.addColorStop(1, “#333”);
                    cxt.save();
                    cxt.strokeStyle = color;
                    cxt.beginPath();
                    cxt.moveTo(x1, y1);
                    cxt.lineTo(x2, y2);
                    cxt.closePath();
                    cxt.stroke();
                    cxt.restore();
                },
                //鼠标连线
                drawMouseLine: function () {
                },
                //粉色小点动起来 及连线
                moveCircle: function () {
                    this.cxt.clearRect(0, 0, this.cw, this.ch);
                    for (var i = 0; i < this.num; i++) {
                        this.data[i].x += this.data[i].cX;
                        this.data[i].y += this.data[i].cY;
                        //边界值判断
                        if (this.data[i].x > this.cw || this.data[i].x < 0) {
                            this.data[i].cX = -this.data[i].cX;
                        }
                        if (this.data[i].y > this.ch || this.data[i].y < 0) {
                            this.data[i].cY = -this.data[i].cY;
                        }
                        this.drawCircle(this.data[i].x, this.data[i].y);
                        //用勾股定理判断是否连线
                        for (var j = i + 1; j < this.num; j++) {//下一个点 i++
                            if ((this.data[i].x – this.data[j].x) * (this.data[i].x – this.data[j].x) +
                                (this.data[i].y – this.data[j].y) * (this.data[i].y – this.data[j].y) <= 50 * 50) {
                                this.drawLine(this.data[i].x, this.data[i].y, this.data[j].x, this.data[j].y);
                            }
                        }
                    }
                }
            }
            Canvas.animate.init();
            setInterval(function () {
                Canvas.animate.moveCircle();
            }, 13);
        }
    </script>
</body>
</html>

网站前端后台开发协作|web前端开发浏览器|前端开发网课百度云

» 本文来自:前端开发者 » 《前端开发网站效果:星空连线背景》
» 本文链接地址:https://www.rokub.com/5113.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!