JS实现抽奖名字雪花飘落特效

最新推荐文章于 2024-07-22 15:13:59 发布

新新家园

最新推荐文章于 2024-07-22 15:13:59 发布

阅读量395

点赞数 7

文章标签： javascript 前端 html css

本文链接：https://blog.csdn.net/weixin_46127011/article/details/135817056

版权

本文介绍了一段HTML、CSS和JavaScript代码，实现了一个动态效果，雪花随机飘落并在canvas上显示随机选取的名字，利用requestAnimationFrame确保动画流畅。

摘要由CSDN通过智能技术生成

html部分：

<canvas id="canvas" width="100%" height="100%"></canvas>

js部分:

控制雪花飘落的速度，可以通过设置drops[i].y，其值越小，速度越小。使用 requestAnimationFrame（）方法可以更好的使雪花下落的更顺畅。

<script type="text/javascript">
        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');

        //canvas画布大小
        canvas.height = window.innerHeight;
        canvas.width = window.innerWidth;

        const texts = ['人名1', '人名2', '人名3', '人名4']; // 名字列表
        const fontSize = 25;
        const columns = 30; // 列数，根据需要调整

        let drops = []; // 雪花数组
        let windStrength = 0.01; // 风的影响大小（可根据需要调整）

        function draw() {
            ctx.clearRect(0, 0, canvas.width, canvas.height); // 清除画布
            ctx.fillStyle = 'rgba(184,32,7)'; // 设置背景颜色
            ctx.fillRect(0, 0, canvas.width, canvas.height); // 填充背景色
            ctx.fillStyle = "rgba(255,237,38)"; // 设置文字颜色
            ctx.font = fontSize + 'px Microsoft YaHei'; // 设置字体大小和样式

            for (let i = 0; i < columns; i++) {
                if (!drops[i]) {
                    drops[i] = { name: texts[Math.floor(Math.random() * texts.length)], x: Math.random() * canvas.width, y: 0 }; // 在画布上随机选择一个初始位置作为雪花，并初始化位置为0
                } else {
                    // 使用线性插值平滑地更新雪花位置，并添加风的影响使雪花产生微小的水平偏移
                    drops[i].y += 0.7
                    drops[i].x += 2;
                    if (drops[i].y * fontSize > canvas.height && Math.random() > 0.95) { // 如果雪花到达底部或随机值大于0.95，重置位置并重新选择名字
                        drops[i] = { name: texts[Math.floor(Math.random() * texts.length)], x: Math.random() * canvas.width, y: 0 }; // 重置位置为初始位置，并重新选择名字。
                    } else { // 如果雪花未到达底部，则绘制名字到画布上
                        ctx.fillText(drops[i].name, drops[i].x, drops[i].y * fontSize); // 在雪花当前位置绘制名字。
                    }
                }
            }
            requestAnimationFrame(draw); // 使用requestAnimationFrame来精确控制动画的帧率。

        }
        draw(); // 开始动画循环。
    </script>

css样式部分:

 <style type="text/css">
        html,
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
        }

        canvas {
            display: block;
        }
    </style>

完整代码:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>抽奖名字雪花飘动画</title>
    <style type="text/css">
        html,
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
        }

        canvas {
            display: block;
        }
    </style>
</head>

<body>
    <canvas id="canvas" width="100%" height="100%"></canvas>
    <script type="text/javascript">
        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');

        //canvas画布大小
        canvas.height = window.innerHeight;
        canvas.width = window.innerWidth;

        const texts = ['人名1', '人名2', '人名3', '人名4']; // 名字列表
        const fontSize = 25;
        const columns = 30; // 列数，根据需要调整

        let drops = []; // 雪花数组
        let windStrength = 0.01; // 风的影响大小（可根据需要调整）

        function draw() {
            ctx.clearRect(0, 0, canvas.width, canvas.height); // 清除画布
            ctx.fillStyle = 'rgba(184,32,7)'; // 设置背景颜色
            ctx.fillRect(0, 0, canvas.width, canvas.height); // 填充背景色
            ctx.fillStyle = "rgba(255,237,38)"; // 设置文字颜色
            ctx.font = fontSize + 'px Microsoft YaHei'; // 设置字体大小和样式

            for (let i = 0; i < columns; i++) {
                if (!drops[i]) {
                    drops[i] = { name: texts[Math.floor(Math.random() * texts.length)], x: Math.random() * canvas.width, y: 0 }; // 在画布上随机选择一个初始位置作为雪花，并初始化位置为0
                } else {
                    // 使用线性插值平滑地更新雪花位置，并添加风的影响使雪花产生微小的水平偏移
                    drops[i].y += 0.7
                    drops[i].x += 2;
                    if (drops[i].y * fontSize > canvas.height && Math.random() > 0.95) { // 如果雪花到达底部或随机值大于0.95，重置位置并重新选择名字
                        drops[i] = { name: texts[Math.floor(Math.random() * texts.length)], x: Math.random() * canvas.width, y: 0 }; // 重置位置为初始位置，并重新选择名字。
                    } else { // 如果雪花未到达底部，则绘制名字到画布上
                        ctx.fillText(drops[i].name, drops[i].x, drops[i].y * fontSize); // 在雪花当前位置绘制名字。
                    }
                }
            }
            requestAnimationFrame(draw); // 使用requestAnimationFrame来精确控制动画的帧率。

        }
        draw(); // 开始动画循环。
    </script>
</body>

</html>