-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.js
56 lines (47 loc) · 1.1 KB
/
index.js
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
// 获取画布
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
document.body.appendChild(canvas);
// 设置画布大小
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
// 定义星星数组
const stars = [];
// 创建星星对象
class Star {
constructor() {
this.x = Math.random() * canvas.width;
this.y = Math.random() * canvas.height;
this.size = Math.random() * 3;
this.speed = Math.random() * 0.2;
}
// 绘制星星
draw() {
ctx.fillStyle = 'white';
ctx.fillRect(this.x, this.y, this.size, this.size);
}
// 更新星星位置
update() {
this.x += this.speed;
if (this.x > canvas.width) {
this.x = 0;
this.y = Math.random() * canvas.height;
}
}
}
// 创建星星并加入数组
for (let i = 0; i < 100; i++) {
stars.push(new Star());
}
// 动画循环
function animate() {
requestAnimationFrame(animate);
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 更新并绘制每颗星星
stars.forEach(star => {
star.update();
star.draw();
});
}
// 开始动画
animate();