首页 > > 网页制作 > css >

黑客帝国背景

2019-08-26 05:49:17来源：博客园阅读 ()

黑客帝国背景

<!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>

原文链接:https://www.cnblogs.com/Evil-Legend/p/Welcome-to-my-blog.html
如有疑问请与原作者联系

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有