html 萤火虫特效,html5 canvas逼真的夜幕森林萤火虫动画
时间: 2023-12-23 18:19:01 浏览: 6
实现萤火虫特效可以使用 HTML 和 CSS,也可以使用 HTML5 Canvas 进行绘图。下面是一个使用 HTML5 Canvas 实现逼真的夜幕森林萤火虫动画的示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>萤火虫动画</title>
<meta charset="utf-8">
<style>
canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
const NUM_PARTICLES = 100;
const PARTICLE_SIZE = 3;
const MAX_SPEED = 2;
const MAX_DISTANCE = 50;
const LIGHT_COLOR = 'rgba(255, 255, 255, 0.5)';
const DARK_COLOR = 'rgba(255, 255, 255, 0.1)';
class Particle {
constructor() {
this.x = Math.random() * canvas.width;
this.y = Math.random() * canvas.height;
this.vx = (Math.random() - 0.5) * MAX_SPEED;
this.vy = (Math.random() - 0.5) * MAX_SPEED;
}
draw() {
ctx.beginPath();
ctx.arc(this.x, this.y, PARTICLE_SIZE, 0, 2 * Math.PI);
ctx.fillStyle = LIGHT_COLOR;
ctx.fill();
}
update() {
this.x += this.vx;
this.y += this.vy;
if (this.x < 0 || this.x > canvas.width) {
this.vx = -this.vx;
}
if (this.y < 0 || this.y > canvas.height) {
this.vy = -this.vy;
}
}
distanceTo(other) {
const dx = other.x - this.x;
const dy = other.y - this.y;
return Math.sqrt(dx * dx + dy * dy);
}
drawLineTo(other) {
const distance = this.distanceTo(other);
if (distance < MAX_DISTANCE) {
ctx.beginPath();
ctx.moveTo(this.x, this.y);
ctx.lineTo(other.x, other.y);
ctx.strokeStyle = DARK_COLOR;
ctx.lineWidth = (MAX_DISTANCE - distance) / MAX_DISTANCE * 2;
ctx.stroke();
}
}
updateLines(particles) {
for (let i = 0; i < particles.length; i++) {
const other = particles[i];
if (this !== other) {
this.drawLineTo(other);
}
}
}
}
const particles = [];
for (let i = 0; i < NUM_PARTICLES; i++) {
particles.push(new Particle());
}
function animate() {
requestAnimationFrame(animate);
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (let i = 0; i < particles.length; i++) {
particles[i].updateLines(particles);
}
for (let i = 0; i < particles.length; i++) {
particles[i].update();
particles[i].draw();
}
}
animate();
</script>
</body>
</html>
```
上述代码会创建一个画布并在其中绘制 100 个萤火虫,它们会随机移动并在彼此之间绘制发光的线条,营造出夜幕森林中萤火虫的效果。你可以根据自己的需求调整代码中的常量值来改变动画效果。
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)