使用canvas制作下雪的特效

在前端开发中，你可以使用HTML的<canvas>元素和JavaScript来制作下雪的特效。以下是一个简单的示例，展示了如何创建这种效果：

HTML结构：

<!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, html {
            margin: 0;
            padding: 0;
            overflow: hidden;
            width: 100%;
            height: 100%;
        }
        canvas {
            background: #333;
            display: block;
            position: absolute;
        }
    </style>
</head>
<body>
    <canvas id="snowCanvas"></canvas>
    <script src="snow.js"></script>
</body>
</html>

JavaScript代码 (snow.js)：

const canvas = document.getElementById('snowCanvas');
const ctx = canvas.getContext('2d');

let snowflakes = []; // 存储雪花的数组
const numSnowflakes = 100; // 雪花的数量
const flakeSize = 5; // 雪花的大小
const fallSpeed = 0.5; // 下落速度

function resize() {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
}

function snowFlake() {
    this.x = Math.random() * canvas.width; // 随机x坐标
    this.y = Math.random() * canvas.height; // 随机y坐标
    this.size = Math.random() * flakeSize + 2; // 随机大小
    this.speed = Math.random() * fallSpeed + 0.1; // 随机速度
    this.opacity = Math.random(); // 随机透明度
}

snowFlake.prototype.update = function() {
    this.y += this.speed; // 更新y坐标，实现下落效果
    if (this.y > canvas.height) {
        this.y = 0; // 如果雪花落出画布，则重置其位置到顶部
    }
}

snowFlake.prototype.draw = function() {
    ctx.globalAlpha = this.opacity; // 设置透明度
    ctx.fillStyle = '#fff'; // 设置颜色为白色
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2); // 绘制圆形代表雪花
    ctx.fill();
}

function createSnowflakes() {
    for (let i = 0; i < numSnowflakes; i++) {
        snowflakes.push(new snowFlake()); // 创建雪花并添加到数组中
    }
}

function updateSnowflakes() {
    ctx.clearRect(0, 0, canvas.width, canvas.height); // 清除画布上的内容
    snowflakes.forEach(flake => { // 遍历雪花数组，更新并绘制每一片雪花
        flake.update();
        flake.draw();
    });
    requestAnimationFrame(updateSnowflakes); // 使用requestAnimationFrame实现动画循环
}

window.onload = function() {
    resize(); // 初始化画布大小
    createSnowflakes(); // 创建雪花
    updateSnowflakes(); // 开始动画循环
    window.onresize = resize; // 监听窗口大小变化，重新调整画布大小
};