JS随机数字下落

最新推荐文章于 2024-09-07 13:38:28 发布

小device

最新推荐文章于 2024-09-07 13:38:28 发布

阅读量143

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/qq_45957308/article/details/131358027

版权

该代码示例展示了一个在HTML5Canvas上创建文本下落动画的方法。首先设置画布尺寸，然后将字符串分割成数组并设定字体大小。计算每列可容纳的文本数量，并初始化每个列的下落位置。通过循环绘制随机选取的文本并模拟下落效果，当文本超出画布高度时重置其位置。利用`setInterval`函数不断更新画面，形成持续的下落动画。

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

1.实现思路：
（1）设置画布的大小

（2）定义一个字符串，用split把字符串变为数组，再设置字体大小，统计下落位置

（3） 1.获取页面的大小包括宽度和高度

2.用cols获取能够宽度加载列数

3.drops加载每一列的位置

4.drops[2]=10 2为第二排的 top为10

2.具体代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        canvas {
            display: block;
        }
    </style>
</head>

<body>
    <canvas id="canvas"></canvas>
    <script>
        function $(id) {
            return document.getElementById(id);
        }
        //画布 的大小设置
        var mywindow = window.screen;
        var canvas = $("canvas");
        canvas.width = mywindow.width;
        canvas.height = mywindow.height;

        //要输出的信息
        var str = "0123456789";
        str = str.split("");
        var fontSize = 16;//输出字体的大小
        //每列显示多少个信息
        var cols = canvas.width / fontSize;
        //数组，统计下落的位置
        var drops = [];
        for (var i = 0; i < cols; i++) {
            drops[i] = 1;
        }

        var ctx = canvas.getContext("2d");
        function draw() {
            /*
             * 获取页面的 大小 包括宽度和高度
             * 用cols获取能够宽度加载列数
             * drops加载每一列的位置
             * drops[2]=10 2为第二排的 top为10
             */
            ctx.fillStyle = "rgba(0,0,0,0.05)";
            ctx.fillRect(0, 0, canvas.width, canvas.height);
            ctx.fillStyle = "green";
            ctx.font = fontSize + "px arial";
            for (var i = 0; i < cols; i++) {
                var text = str[Math.floor(Math.random() * (str.length))];
                ctx.fillText(text, i * fontSize, drops[i] * fontSize);
                if (drops[i] * fontSize > canvas.height || Math.random() > 0.95)
                    drops[i] = 0;//把位置恢复到最上面
                //控制下落的位置
                drops[i]++;
            }
        }
        setInterval(draw, 33);
    </script>
</body>

</html>

小device

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
JS随机数字下落

（2）定义一个字符串，用split把字符串变为数组，再设置字体大小，统计下落位置。4.drops[2]=10 2为第二排的 top为10。2.用cols获取能够宽度加载列数。3.drops加载每一列的位置。（3） 1.获取页面的大小包括宽度和高度。（1）设置画布的大小。
复制链接

扫一扫