实现思路:
HTML结构:
- 使用了一个
<canvas>
元素来绘制星空效果。CSS样式:
- 设置了全屏背景为黑色,并使canvas元素充满整个屏幕。
JavaScript脚本:
- 获取canvas元素和2D上下文。
- 初始化星星数组,每个星星有随机的位置、半径和速度,随机颜色生成函数。
- 使用
requestAnimationFrame
创建动画循环,每帧更新星星的位置并重新绘制。- 添加了窗口大小变化的事件监听器,确保画布大小随窗口变化而更新。
效果图:
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
margin: 0;
overflow: hidden;
background-color: #000;
}
canvas {
display: block;
}
</style>
</head>
<body>
<canvas id="starrySky"></canvas>
</body>
<script>
// 获取canvas元素和上下文
const canvas = document.getElementById("starrySky");
const ctx = canvas.getContext("2d");
// 设置canvas的尺寸为整个窗口
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
// 创建星星的数组
let stars = [];
const numStars = 500; // 星星的数量
// 初始化星星的位置、大小、颜色和透明度
for (let i = 0; i < numStars; i++) {
stars.push({
x: Math.random() * canvas.width,
y: Math.random() * canvas.height,
radius: Math.random() * 1.5 + 0.5, // 半径在0.5到2之间
opacity: Math.random() * 1, // 透明度在0.5到1之间
color: getRandomColor(), // 随机颜色函数
vx: Math.random() * 0.5 - 0.25, // x轴速度在-0.25到0.25之间
vy: Math.random() * 0.5 - 0.25, // y轴速度在-0.25到0.25之间
});
}
// 随机颜色生成函数
function getRandomColor() {
const r = Math.floor(Math.random() * 256);
const g = Math.floor(Math.random() * 256);
const b = Math.floor(Math.random() * 256);
return `rgba(${r}, ${g}, ${b}, 1)`;
}
// 更新并绘制星星
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (let i = 0; i < stars.length; i++) {
let star = stars[i];
// 更新星星的位置
star.x += star.vx;
star.y += star.vy;
// 如果星星超出了画布边界,重新随机位置
if (
star.x < 0 ||
star.x > canvas.width ||
star.y < 0 ||
star.y > canvas.height
) {
star.x = Math.random() * canvas.width;
star.y = Math.random() * canvas.height;
}
// 改变星星的透明度来实现闪烁效果
star.opacity -= 0.005; // 透明度每帧减少
if (star.opacity <= 0) {
star.opacity = 1; // 透明度重新设为1,重新闪烁
star.color = getRandomColor(); // 更换颜色
// star.color = "#fff";
}
// 绘制星星
ctx.beginPath();
ctx.arc(star.x, star.y, star.radius, 0, Math.PI * 2);
// ctx.fillText("❥(^_-)", star.x, star.y);
// ctx.fillText("❤", star.x, star.y);
ctx.fillStyle = star.color; // 使用星星对象中的颜色属性
ctx.fill();
}
requestAnimationFrame(draw);
}
// 开始绘制星空
draw();
// 监听窗口大小变化,重新设置canvas大小
window.addEventListener("resize", function () {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
});
</script>
</html>