首页html背景js星空背景

html背景js星空背景

时间: 2023-11-29 13:03:39 浏览: 165

您可以使用以下代码来实现HTML背景中的JS星空背景效果： ```html <!DOCTYPE html> <html> <head> <style> /* CSS reset */ * { margin: 0; padding: 0; } canvas { position: absolute; top: 0; left: 0; } </style> </head> <body> <canvas id="canvas"></canvas> <script> // 获取画布和上下文 var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); // 设置画布尺寸 canvas.width = window.innerWidth; canvas.height = window.innerHeight; // 星星的数量 var numStars = 1000; // 生成星星坐标和大小 var stars = []; for (var i = 0; i < numStars; i++) { var x = Math.random() * canvas.width; var y = Math.random() * canvas.height; var size = Math.random() * 3; stars.push({ x: x, y: y, size: size }); } // 绘制星空背景 function drawStars() { ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.fillStyle = 'white'; for (var i = 0; i < numStars; i++) { var star = stars[i]; ctx.fillRect(star.x, star.y, star.size, star.size); } } // 动画循环 function animate() { requestAnimationFrame(animate); drawStars(); } // 启动动画 animate(); </script> </body> </html> ``` 以上代码会在HTML页面中创建一个画布元素（`<canvas>`），然后使用JavaScript绘制出随机分布的星星，从而实现了动态的星空背景效果。您可以将上述代码复制到HTML文件中并打开以查看效果。希望这能帮到您！如果还有其他问题，请随时提问。

阅读全文