2021-04-26 canvas代码雨

最新推荐文章于 2023-06-22 09:00:00 发布

wyystyle

最新推荐文章于 2023-06-22 09:00:00 发布

阅读量105

点赞数

分类专栏： canvas

本文链接：https://blog.csdn.net/wyystyle/article/details/116164135

版权

canvas 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>代码雨</title>
    <style>
      *{
            margin: 0;
            padding: 0;
        }
        #canvas { display: block;background: #000;}
    </style>
</head>
<body>
<div id="canvas-warp">
    <canvas id="canvas" width="" height="">
        你的浏览器居然不支持Canvas？！赶快换一个吧！！
    </canvas>
</div>

<script>
    var docW = document.documentElement.clientWidth;
    var dovH = document.documentElement.clientHeight;
    var canvas = document.getElementById('canvas');
    canvas.width=docW;
    canvas.height=dovH;
    var context = canvas.getContext('2d');
    var cw = docW;
    var ch = dovH;
    var arrBig = [];
    var arrSmall=[];
    var str = ["A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z","1","2","3","4","5","6","7","8","9","0"];
    var fn = {
        getStr:function(){
            var index = Math.floor(Math.random()*(str.length));
            return str[index]; 
        },
        getxNum:function(){
            return Math.floor(docW/16);
        },
        getyNum:function(){
            return Math.floor(dovH/16);
        },
    }
    var arrIndex=[];
    for(var i=0;i<fn.getxNum();i++){
        arrIndex[i] = 1;
    }

    var lenx = fn.getxNum();
    var leny = fn.getyNum();
    function drew(){
        context.fillStyle='rgba(0,0,0,0.05)';
        context.fillRect(0,0,docW,dovH);
        for(var i=0;i<lenx;i++){
            arrIndex[i]++;
            context.font = "16px 微软雅黑";
            context.textAlign = "left";
            context.fillStyle="#0c3";
            context.fillText(fn.getStr(), 16*(i), 16*arrIndex[i]);
            if(arrIndex[i]>fn.getyNum() && Math.random()>0.99){
                arrIndex[i]=0;
            }
        }
        requestAnimationFrame(drew);
    }
    drew();
</script>
</body>
</html>

wyystyle

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2021-04-26 canvas代码雨

<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <title>代码雨</title> <style> *{ margin: 0; padding: 0; } #canvas { display: block;background: #
复制链接

扫一扫