首页帮忙用js编写星空背景页面

帮忙用js编写星空背景页面

时间: 2023-05-22 07:04:56 浏览: 117

好的，以下是一个使用 JavaScript 编写的星空背景页面的基本代码： ``` <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>星空背景页面</title> <style> html, body { margin: 0; padding: 0; height: 100%; } canvas { display: block; height: 100%; width: 100%; } </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; // 随机生成星星 function createStars() { var stars = []; for (var i = 0; i < 1000; 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}); } return stars; } // 绘制星星 function drawStars(stars) { for (var i = 0; i < stars.length; i++) { ctx.beginPath(); ctx.arc(stars[i].x, stars[i].y, stars[i].size, 0, 2 * Math.PI); ctx.fillStyle = "white"; ctx.fill(); } } // 动画循环 function animate() { // 清空画布 ctx.clearRect(0, 0, canvas.width, canvas.height); // 创建和绘制星星 var stars = createStars(); drawStars(stars); // 循环动画 requestAnimationFrame(animate); } animate(); </script> </body> </html> ``` 可以通过复制代码并在浏览器中运行，即可看到一个类似星空背景的页面。

阅读全文