jquery实现瀑布文字

最新推荐文章于 2022-08-10 21:25:20 发布

weixin_30248399

最新推荐文章于 2022-08-10 21:25:20 发布

阅读量70

点赞数

原文链接：http://www.cnblogs.com/shengzi/p/7610392.html

版权

之前在其他地方看到了一个瀑布文字，突然有兴趣也模仿了一个，分享给大家

1 <body style="background: #000;">
2         <canvas id="c"></canvas>
3         
4     </body>

<script>
        var c = document.getElementById("c");
        var ctx = c.getContext("2d");
    
    //制作全屏
    c.height = window.innerHeight;
    c.width = window.innerWidth;
    
    //汉字从Unicode字符集
    var chinese = "岁月太短、一吻天荒..";
    //将字符串转换为一个数组中的单个字符
    chinese = chinese.split("");
    
    var font_size = 20;
    var columns = c.width/font_size; //雨的列数
    //每列的一个数组
    var drops = [];
    //下面是×坐标
    //1 = y 在下降（最初是相同的）
    for(var x = 0; x < columns; x++)
        drops[x] = 1; 
    
    //画
    function draw()
    {   
        //黑BG的帆布
        //半透明BG显示轨迹
        ctx.fillStyle = "rgba(0, 0, 0, 0.07)";
        ctx.fillRect(0, 0, c.width, c.height);
        
        ctx.fillStyle = "#0F0"; //字体颜色
        ctx.font = font_size + "px arial";
        //循环字体
        for(var i = 0; i < drops.length; i++)
        {
            //随机汉字打印
            var text = chinese[Math.floor(Math.random()*chinese.length)];
            //x = i*font_size, y = value of drops[i]*font_size
            ctx.fillText(text, i*font_size, drops[i]*font_size);
            
            //在屏幕上划线后，把它的顶部随机发送到顶部
            //将一个随机性添加到复位中，使分散在轴上的下降
            if(drops[i]*font_size > c.height && Math.random() > 0.975)
                drops[i] = 0;
            
            //增加的Y坐标
            drops[i]++;
        }
    }
    
    setInterval(draw, 30);



        
        
    </script>

转载于:https://www.cnblogs.com/shengzi/p/7610392.html

weixin_30248399

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery实现瀑布文字

之前在其他地方看到了一个瀑布文字，突然有兴趣也模仿了一个，分享给大家1 <body style="background: #000;">2 <canvas id="c"></canvas>3 4 </body><script> var c = doc...
复制链接

扫一扫