CSS+Canvas绘制最美星空(一闪一闪亮晶晶效果+流星划过)
1.效果
2.代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body,
html {
margin: 0;
padding: 0;
overflow: hidden;
}
body {
background: #000;
}
canvas {
width: 100%;
height: 100vh;
display: block;
}
</style>
<title>星空</title>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
class Star {
constructor(x, y, brightness, type) {
this.x = x;
this.y = y;
this.brightness = brightness;
this.alpha = 1;
this.fade = Math.random() * 0.05 + 0.01;
this.type = type;
this.size = (type === 'cross') ? 2 : 1; // 根据类型设置大小
}
draw() {
ctx.beginPath();
if (this.type === 'cross') {
ctx.strokeStyle = `rgba(255, 255, 255, ${this.alpha})`;
ctx.lineWidth = 1; // 设置线条粗细
ctx.moveTo(this.x, this.y - 1 * this.size);
ctx.lineTo(this.x, this.y + 1 * this.size);
ctx.moveTo(this.x - 1 * this.size, this.y);
ctx.lineTo(this.x + 1 * this.size, this.y);
ctx.stroke();
} else {
ctx.fillStyle = `rgba(255, 255, 255, ${this.alpha})`;
ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
ctx.fill();
}
}
update() {
this.brightness += Math.random() * 0.1 - 0.05;
this.brightness = Math.min(Math.max(this.brightness, 0), 1);
this.alpha += this.fade;
if (this.alpha > 1 || this.alpha < 0) {
this.fade = -this.fade;
}
}
}
let stars = [];
const numStars = 200;
function createStars() {
for (let i = 0; i < numStars; i++) {
let type = Math.random() > 0.5 ? 'cross' : 'particle';
stars.push(new Star(
Math.random() * canvas.width,
Math.random() * canvas.height,
Math.random(),
type
));
}
}
function animateStars() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (let i = 0; i < stars.length; i++) {
stars[i].update();
stars[i].draw();
}
requestAnimationFrame(animateStars);
}
let shootingStar = null;
function createShootingStar() {
const startX = Math.random() * canvas.width * 0.5; // 从左侧开始
const startY = 0; // 从顶部开始
const speed = 4 + Math.random() * 6;
const angle = Math.PI / 6 + Math.random() * Math.PI / 3; // 修改划过的角度范围
// 增加长度、宽度和颜色属性
shootingStar = { x: startX, y: startY, speed, angle, length: 80 + Math.random() * 40, thickness: 1 + Math.random() * 2, color: 'rgba(255, 255, 255, 1)' };
}
function animateShootingStar() {
if (!shootingStar) {
if (Math.random() < 0.01) {
createShootingStar();
}
} else {
const { x, y, speed, angle, length, thickness, color } = shootingStar;
ctx.save();
ctx.translate(x, y);
ctx.rotate(angle);
const gradient = ctx.createLinearGradient(0, 0, length, 0);
gradient.addColorStop(0, color);
gradient.addColorStop(1, 'rgba(255, 255, 255, 0)');
ctx.strokeStyle = gradient;
ctx.lineWidth = thickness;
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(length, 0);
ctx.stroke();
ctx.restore();
shootingStar.x += speed * Math.cos(angle);
shootingStar.y += speed * Math.sin(angle);
if (shootingStar.x > canvas.width || shootingStar.y > canvas.height) {
shootingStar = null;
}
}
requestAnimationFrame(animateShootingStar);
}
createStars();
animateStars();
animateShootingStar();
</script>
</body>
</html>
3.结语
创建一个.html文件，复制代码进去就可以看到效果啦~满屏星星很好看，有普通粒子星星，也有一闪一闪的十字星星，不定时会有流星划过，很好看的夜空，如果想要星星变大，可自行调整粒子大小
原文地址：https://blog.csdn.net/misschengispink/article/details/139301411
免责声明：本站文章内容转载自网络资源，如侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！