用HTML5 + JavaScript实现下雪效果

news2024/11/14 18:38:58

用HTML5 + JavaScript实现下雪效果

<canvas>是一个可以使用脚本 (通常为JavaScript) 来绘制图形的 HTML 元素。

<canvas> 标签/元素只是图形容器，必须使用脚本来绘制图形。

HTML5 canvas 图形标签基础https://blog.csdn.net/cnds123/article/details/112916903

下面是用HTML5 + JavaScript实现下雪效果示例，展示了如何使用 HTML5 的 <canvas> 元素以及 JavaScript 来创建下雪效果。效果如下：

源码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Snow Effect</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
            background-color: #D3D3D3;
        }
        canvas {
            display: block;
        }
    </style>
</head>
<body>
    <canvas id="snow"></canvas>

</body>

<script>
document.addEventListener('DOMContentLoaded', function() {
    var canvas = document.getElementById('snow');
    var ctx = canvas.getContext('2d');

    // 设置 canvas 的大小为全屏
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

    // 雪花的数量
    var numberOfSnowflakes = 100;
    var snowflakes = [];

    for (var i = 0; i < numberOfSnowflakes; i++) {
        snowflakes.push({
            x: Math.random() * canvas.width,
            y: Math.random() * canvas.height,
            radius: Math.random() * 4 + 1,
            density: Math.random() * numberOfSnowflakes
        });
    }

    // 绘制雪花
    function drawSnowflakes() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.fillStyle = 'white';
        ctx.beginPath();

        for (var i = 0; i < numberOfSnowflakes; i++) {
            var snowflake = snowflakes[i];
            ctx.moveTo(snowflake.x, snowflake.y);
            ctx.arc(snowflake.x, snowflake.y, snowflake.radius, 0, Math.PI * 2, true);
        }

        ctx.fill();
        moveSnowflakes();
    }

    // 移动雪花
    function moveSnowflakes() {
        for (var i = 0; i < numberOfSnowflakes; i++) {
            var snowflake = snowflakes[i];
            snowflake.y += Math.pow(snowflake.density, 0.5) + 1;
            snowflake.x += Math.sin(snowflake.y);

            // 当雪花到达屏幕底部时，重新设置它们的位置
            if (snowflake.y > canvas.height) {
                snowflakes[i] = {
                    x: Math.random() * canvas.width,
                    y: 0,
                    radius: snowflake.radius,
                    density: snowflake.density
                };
            }
        }
    }

    // 使用 requestAnimationFrame 来持续绘制雪花
    function animate() {
        requestAnimationFrame(animate);
        drawSnowflakes();
    }

    animate();
});
</script>
</html>

通过 CSS 控制背景颜色，JavaScript和 <canvas> 负责实现下雪效果。drawSnowflakes 函数负责绘制雪花，而 moveSnowflakes 函数则更新每个雪花的位置，使它们下落。animate 函数使用 requestAnimationFrame 来创建一个循环，不断绘制和更新雪花，从而实现动态的下雪效果。

改进：加入背景图片，并确保图片等比例缩放以适应浏览器窗口的大小。通过 CSS 控制背景颜色或图片，JavaScript 和 <canvas> 负责动态效果，两者相互独立，易于管理和修改。

你可以将背景图片作为 <body> 标签的背景，使用 CSS 来设置并确保其等比例缩放，通过 CSS 的 background 属性来实现：

将

background-color: #D3D3D3;

改为：

background: url(' snow_background.jpg') no-repeat center center fixed;

background-size: cover;

其中，snow_background.jpg，我这里用：