使用画布和css画一个星星闪烁的背景图
时间: 2024-02-24 14:00:01 浏览: 169
好的,下面是一个使用画布和CSS实现星星闪烁的背景图的示例代码:
HTML:
```
<canvas id="stars"></canvas>
<div class="background"></div>
```
CSS:
```
body {
margin: 0;
padding: 0;
overflow: hidden;
}
#stars {
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
.background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
opacity: 0.8;
}
```
JavaScript:
```
var canvas = document.getElementById('stars');
var ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var stars = [];
for (var i = 0; i < 100; i++) {
stars.push({
x: Math.random() * canvas.width,
y: Math.random() * canvas.height,
radius: Math.random() * 1.5 + 0.5,
alpha: Math.random() * 0.5 + 0.5,
direction: Math.random() < 0.5 ? -1 : 1
});
}
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
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 = 'rgba(255, 255, 255,' + star.alpha + ')';
ctx.fill();
star.x += star.direction * 0.1;
if (star.x < 0 || star.x > canvas.width) {
star.direction = -star.direction;
}
}
requestAnimationFrame(draw);
}
draw();
```
这个代码将创建一个画布和一个半透明的黑色背景,并在画布上绘制100个随机闪烁的星星。星星将根据随机方向以0.1的速度移动,当星星到达画布的边缘时将改变方向。通过动画循环绘制星星,使其闪烁。
请注意,此示例代码的效果可能因浏览器和设备而异,具体效果可能需要根据您的具体需求进行调整。
阅读全文