CSS+Canvas绘制最美星空(一闪一闪亮晶晶效果+流星划过)

本文主要是介绍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>