用html js实现页面鼠标流星特效
时间: 2023-12-24 08:05:27 浏览: 25
好的,以下是一个简单的实现流星特效的例子:
HTML代码:
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>流星特效</title>
<style>
body {
margin: 0;
padding: 0;
}
canvas {
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script src="stars.js"></script>
</body>
</html>
```
JavaScript代码(文件名为stars.js):
```
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var w = canvas.width = window.innerWidth;
var h = canvas.height = window.innerHeight;
// 创建流星数组
var stars = [];
for (var i = 0; i < 30; i++) {
stars.push({
x: Math.random() * w,
y: Math.random() * h,
len: 5 + Math.random() * 10,
speed: 1 + Math.random() * 5,
angle: Math.PI / 6 + Math.random() * Math.PI / 6
});
}
// 绘制流星
function draw() {
ctx.clearRect(0, 0, w, h);
for (var i = 0; i < stars.length; i++) {
var s = stars[i];
ctx.save();
ctx.translate(s.x, s.y);
ctx.rotate(s.angle);
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(s.len, 0);
ctx.strokeStyle = 'white';
ctx.lineWidth = 2;
ctx.stroke();
ctx.restore();
}
}
// 移动流星
function update() {
for (var i = 0; i < stars.length; i++) {
var s = stars[i];
s.x -= s.speed * Math.cos(s.angle);
s.y += s.speed * Math.sin(s.angle);
if (s.x < -s.len || s.y > h + s.len) {
s.x = w + Math.random() * w;
s.y = -s.len;
}
}
}
// 动画循环
(function loop() {
requestAnimationFrame(loop);
draw();
update();
})();
```
这个例子中,我们先创建了一个canvas元素,然后在JavaScript中创建了一个流星数组,每个流星包含位置、长度、速度和角度等信息。在绘制流星时,我们先保存当前画布状态,然后平移和旋转画布,再绘制流星。在移动流星时,我们根据速度和角度计算出x和y的变化量。当流星移出画布时,我们重新随机生成x和y的值,从而实现流星的循环播放效果。最后,我们使用requestAnimationFrame方法实现动画循环。