当前位置：首页 > article >正文

用 HTML5 Canvas 和 JavaScript 实现雪花飘落特效

article 2025/1/18 4:36:23

这篇文章将带您深入解析使用 HTML5 Canvas 和 JavaScript 实现动态雪花特效的代码原理。

1，效果展示

该效果模拟了雪花从天而降的动态场景，具有以下特点：

雪花数量、大小、透明度和下落速度随机。
雪花会在屏幕底部重置到顶部，形成循环效果。
随窗口大小动态调整，始终覆盖整个屏幕。
使用递归绘制真实感十足的雪花形状。

用 HTML5 Canvas 和 JavaScript 实现雪花飘落特效

接下来，我们从代码的核心原理开始，逐步分析实现细节。

2，核心代码结构

实现动态雪花特效的核心代码可以分为以下几个部分：

2.1 Canvas 初始化

HTML5 提供了 canvas 元素，允许我们通过 JavaScript 绘制动态的 2D 图形。

<canvas id="snowCanvas"></canvas>
<script>
    const canvas = document.getElementById('snowCanvas');
    const ctx = canvas.getContext('2d');

    // 设置画布大小为窗口大小
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
</script>

通过 canvas.width 和 canvas.height 设置画布大小，同时确保它能动态适应窗口大小的变化（后续会处理 resize 事件）。

2.2 雪花类的设计

每一片雪花被抽象为一个 Snowflake 类，其包含以下属性：

x 和 y：雪花的位置。
size：雪花的大小，随机生成以模拟自然的变化。
speedX 和 speedY：雪花的水平和垂直速度。
angle 和 angleSpeed：雪花的旋转角度及速度。
opacity：雪花的透明度，增强真实感。

class Snowflake {
   
    constructor() {
   
        this.x = Math.random() * canvas.width;
        this.y = Math.random() * canvas.height;
        this.size = Math.random() * 9 + 1.2;
        this.speedX = Math.random() * 0.1;
        this.speedY = Math