码迷,mamicode.com
首页 > 其他好文 > 详细

黑客帝国背景

时间:2019-08-24 23:08:53      阅读:131      评论:0      收藏:0      [点我收藏+]

标签:block   字体   生成   rip   win   大小   gre   esc   order   

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style>
    *{
        margin:0;
        padding:0;
    }
    /* #canvas{
        display:block;
        border:1px solid blue;
        margin:100px auto 0;
    } */
    #canvas{
        display:block;
        
    }
</style>
</head>
<body>
    <canvas id="canvas"></canvas>
    <script>
        var canV = document.getElementById("canvas"),
            ctX = canV.getContext("2d");
            // 1 需要获取整个可视区域的宽高 赋值给canvas画布
            // 2 准备26个字母 或者是数字
            // 3 设置文字的大小
            // 4 一行显示多少个文字 可视区域的宽除以文字的大小
            // 5 用数组去记录我们的y坐标
            // [0,0,0,0] [1,1,1,1] [2,2,2,2] 不断改变数字的大小 字母的y坐标就不断改变
            // 6 需要一个函数去生成字母
        
        
            var oWidth,oHeight
            function init(){
                oWidth = window.innerWidth // 1 需要获取整个可视区域的宽高 赋值给canvas画布
                oHeight = window.innerHeight
                canV.width = oWidth
                canV.height = oHeight
                draw()
            }
            init()
            window.onresize = init;

        var oText = "QWERTYUIOPASDFGHJKLZXCVBNM", // 2 准备26个字母
            oFs = 24 , // 放字体的区域的宽度
            oNum = Math.floor(oWidth/oFs), // 4 一行显示多少个文字 可视区域的宽除以文字的大小
            oArry = [] ;

            for(var i=0; i<oNum ; i++){ //让y坐标初始都是0 [0,0,0,0,0...]
                oArry.push(0)
            }
            
            // 6 需要一个函数去生成字母
            
            function draw(){
                ctX.fillStyle = "rgba(0,0,0,0.1)"
                ctX.fillRect(0,0,oWidth,oHeight)
                ctX.fillStyle = "green"
                //ctX.font = oFs + "px" //画布设置字体的大小
                ctX.font = `18px arial`;
                //1 知道字母的x坐标跟y坐标
                //2 随机生成字母
                //3 开始去渲染字母
                for(var i=0; i<oNum; i++){
                    var oX = i*oFs, //X坐标
                        oY = oArry[i]*oFs, //Y坐标
                        oRandom = Math.floor(Math.random()*oText.length) ;//随机一个0-25的数字
                        
                        ctX.fillText(oText[oRandom],oX,oY) //渲染字母
                    if( oY > oHeight && Math.random() > 0.95){
                        oArry[i] = 0
                    }
                    oArry[i]++
                }
                
            }
            
            setInterval(draw,50) // 每隔50毫秒就执行一次 draw函数
            
    </script>
</body>
</html>
<!--
            ctX.moveTo(100,100)
            ctX.lineTo(200,200)
            ctX.lineTo(200,100)
            ctX.lineTo(100,100)
            //ctX.stroke()
            ctX.fillStyle ="green"
            ctX.fill()
    
-->

黑客帝国背景

标签:block   字体   生成   rip   win   大小   gre   esc   order   

原文地址:https://www.cnblogs.com/Evil-Legend/p/Welcome-to-my-blog.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!