请编写一个js实现星空效果
时间: 2023-04-08 16:03:26 浏览: 75
好的,我可以回答这个问题。以下是一个简单的实现星空效果的 JavaScript 代码:
```javascript
// 获取画布和上下文
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
// 设置画布大小
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
// 定义星星对象
function Star(x, y, radius, color) {
this.x = x;
this.y = y;
this.radius = radius;
this.color = color;
}
// 生成随机颜色
function randomColor() {
var colors = ["#FFFFFF", "#E5E5E5", "#CCCCCC", "#B2B2B2", "#999999"];
return colors[Math.floor(Math.random() * colors.length)];
}
// 生成随机星星
function createStar() {
var x = Math.random() * canvas.width;
var y = Math.random() * canvas.height;
var radius = Math.random() * 2;
var color = randomColor();
return new Star(x, y, radius, color);
}
// 生成星星数组
var stars = [];
for (var i = 0; i < 100; i++) {
stars.push(createStar());
}
// 绘制星星
function drawStars() {
for (var i = 0; i < stars.length; i++) {
var star = stars[i];
ctx.beginPath();
ctx.arc(star.x, star.y, star.radius, 0, Math.PI * 2);
ctx.fillStyle = star.color;
ctx.fill();
}
}
// 动画循环
function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawStars();
requestAnimationFrame(animate);
}
animate();
```
这段代码会在画布上生成一些随机颜色和大小的星星,并且会不断地更新它们的位置,形成一个星空效果。