lisa的个人博客

慢慢理解世界，慢慢更新自己

0%

canva绘制星空特效

发表于
本文字数： 3k 阅读时长 ≈ 3 分钟

star.png

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
const canvas = document.createElement('canvas');
document.body.appendChild(canvas);

const ctx = canvas.getContext('2d');

let w, h;

function resize() {
    w = canvas.width = window.innerWidth;
    h = canvas.height = window.innerHeight;
};
resize();
window.onresize = function() {
    resize();
};
// 绘制背景
function drawBg() {
    ctx.beginPath();
    ctx.fillStyle = "#020215";
    ctx.fillRect(0, 0, w, h);
    ctx.fill();
    ctx.save();
};


// 随机颜色构造函数
function Color() {
    this.r = ~~(Math.random() * 255);
    this.g = ~~(Math.random() * 255);
    this.b = ~~(Math.random() * 255);
    this.rgb = `rgb(${this.r},${this.g},${this.b})`;
};

// 创建粒子配置
let dots = {
    n: 300, // 粒子数量
    arr: [],
    minDis: 50, // 两个粒子最小间距
    radiusArr: [],
    d_mouse: 100
};

// 每个粒子的配置
function Dot() {
    // 随机颜色
    this.color = new Color().rgb;
    // 圆心坐标
    this.x = ~~(Math.random() * w);
    this.y = ~~(Math.random() * h);
    // 半径
    this.r = ~~(Math.random() * 5);
    // 速度
    this.vx = (Math.random() - 0.5) * 3;
    this.vy = (Math.random() - 0.5) * 3;
};

// 初始化
Dot.prototype.draw = function() {
    ctx.beginPath();
    ctx.fillStyle = this.color;
    ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI, false);
    ctx.fill();
};

// 创建粒子放入数组
for (let i = 0; i < dots.n; i++) {
    dots.arr.push(new Dot());
}

// 绘制粒子
function drawDots() {
    // drawBg();
    dots.arr.forEach(item => {
        item.draw();
        dots.radiusArr.push(item.r);
    });
};

// 移动粒子
function moveDots() {
    dots.arr.forEach(item => {
        if (item.x > w || item.x < 0) {
            item.vx = -item.vx;
        };
        if (item.y > h || item.y < 0) {
            item.vy = -item.vy;
        }
        item.x += item.vx;
        item.y += item.vy;
    });

};

// 混合颜色
// function mixColor(dot1, dot2) {
//     let r1 = dot1.r;
//     let r2 = dot2.r;
//     let color1 = dot1.color;
//     let color2 = dot2.color;
//     let r = ~~((color1.r * r1 + color2.r * r2) / (r1 + r2));
//     let g = ~~((color1.g * r1 + color2.g * r2) / (r1 + r2));
//     let b = ~~((color1.b * r1 + color2.b * r2) / (r1 + r2));
//     return `rgba(${r},${g},${b},1)`
// };

// 连线

function connect() {
    for (let i = 0; i < dots.n; i++) {
        for (let j = 0; j < dots.n; j++) {
            let dot1 = dots.arr[i];
            let dot2 = dots.arr[j];
            // let color = mixColor(dot1, dot2);
            // console.log(color)
            if (Math.abs(dot1.x - dot2.x) < dots.minDis && Math.abs(dot1.y - dot2.y) < dots.minDis) {
                ctx.lineWidth = 0.2;
                ctx.beginPath();
                ctx.strokeStyle = "#000";
                ctx.moveTo(dot1.x, dot1.y);
                ctx.lineTo(dot2.x, dot2.y);
                ctx.stroke();
            }
        }
    }
};

// 鼠标移入粒子变大

canvas.onmousemove = function(ev) {
    let pX = ev.pageX;
    let pY = ev.pageY;
    dots.arr.forEach((item, index) => {
        if (Math.abs(item.x - pX) < dots.d_mouse && Math.abs(item.y - pY) < dots.d_mouse) {
            item.r = dots.radiusArr[index] * 5;
        } else {
            item.r = dots.radiusArr[index];
        }
    })
};

// 无限运动

function animate() {
    ctx.clearRect(0, 0, w, h);
    moveDots();
    drawDots();
    connect();
    window.requestAnimationFrame(animate);

};
animate();