绿色背景雪花飞舞Canvas特效

原创已于 2025-06-27 15:56:56 修改 · 350 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#特效

于 2025-04-19 13:21:35 首次发布

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>绿色背景雪花飞舞特效</title>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
}

canvas {
display: block;
background-color: #008000;
}

#link {
position: absolute;
bottom: 20px;
right: 20px;
color: white;
text-decoration: none;
z-index: 1;
}

#link a {
color: white;
text-decoration: none;
transition: color 0.3s ease;
}

#link a:hover {
color: lightblue;
}
</style>
</head>

<body>
<canvas id="snowfall"></canvas>
<div id="link">

</div>
<script>
const canvas = document.getElementById('snowfall');
const ctx = canvas.getContext('2d');

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

const snowflakes = [];
const numSnowflakes = 100;

class Snowflake {
constructor() {
this.x = Math.random() * canvas.width;
this.y = Math.random() * canvas.height;
this.radius = Math.random() * 3 + 1;
this.speedY = Math.random() * 2 + 1;
this.speedX = (Math.random() - 0.5) * 2;
}

update() {
this.y += this.speedY;
this.x += this.speedX;

if (this.y > canvas.height) {
this.y = 0;
this.x = Math.random() * canvas.width;
}

if (this.x > canvas.width) {
this.x = 0;
} else if (this.x < 0) {
this.x = canvas.width;
}
}

draw() {
ctx.beginPath();
ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
ctx.fillStyle = 'white';
ctx.fill();
}
}

for (let i = 0; i < numSnowflakes; i++) {
snowflakes.push(new Snowflake());
}

function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height);

for (let i = 0; i < snowflakes.length; i++) {
const snowflake = snowflakes[i];
snowflake.update();
snowflake.draw();
}

requestAnimationFrame(animate);
}

animate();

window.addEventListener('resize', function () {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
});
</script>
</body>

</html>