html入门

最新推荐文章于 2022-04-24 18:49:34 发布

CPU1994GHz

最新推荐文章于 2022-04-24 18:49:34 发布

阅读量406

点赞数

分类专栏：如果去做前台文章标签： html 网页编程

本文链接：https://blog.csdn.net/CPU1994GHz/article/details/80741620

版权

如果去做前台专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一个小效果

将代码复制到txt文件中，将后缀改成html,点开。

    <!doctype html public "-//w3c//dtd html 4.0 transitional//en">  
    <html>  
     <head>  
      <title>黑客面板特效之文字矩阵</title>  
      <meta name="generator" content="editplus">  
      <meta name="author" content="">  
      <meta name="keywords" content="">  
      <meta name="description" content="">  
     <link href="css/index.css" rel="stylesheet" type="text/css">  
     </head>  

     <body>  
     <!--画板-->  
        <canvas id="tie"></canvas>  
     </body>  
    <script>  
     //定制要打印的文字数组  
       var str=[];  
        str=prompt("请输入你要显示的文字矩阵,默认为01：","");  
        if(str!=null&&str!=""){  
            str=str;  
        }else{  
            str="0101010010101011111100001101010101010" ;//如果用户未输入就让文字为此数组  
        }  
        //console.log(str);  
        <!--取得画板工具-->  
        var canvas=document.getElementById("tie");  
        //取得画板的合法值  
        var ctx=canvas.getContext("2d");  
        var s=window.screen;  
        var w=s.width;//取得屏幕的宽度  
        var h=s.height;//取得屏幕的高度  
        canvas.width=w;//让画板的高度和宽度都为屏幕的高度和宽度  
        canvas.height=h;  
        //设置文字的字体大小  
        var fontSize=18;  
        //计算屏幕一行很放下多少个文字  
        var clos=Math.floor(w/fontSize);  
        //console.log(clos);  
        //设置文字的位置和文字的样式  
        ctx.font="600 "+fontSize+"px 微软雅黑";//600为字体加粗的大小，记得600 后面要加空格  
        //申明一个数组  
        var drops=[];  
        //计算每一个文字所谓坐标 存储y轴的坐标  
        for(var i=0;i<clos;i++){  
            drops.push(0);  
            }  
            //随机颜色函数  
        function getRandomColor()   
    {   
        var c = '#';   
        var cArray = ['0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F']; //准备好要用的颜色拼接值  
        for(var i = 0; i < 6;i++) //因为要用到6个数值 具体看自定义颜色面板  
        {   
        var cIndex = Math.round(Math.random()*15); //数组长度为16但数组下表从0开始故为15  
        c += cArray[cIndex]; //拼接颜色值  
        }   
        return c;   
    }   
        function draw(){  
            ctx.fillStyle="rgba(0,0,0,0.05)";//设置背景颜色和透明度  
            ctx.fillRect(0,0,w,h);  
            ctx.fillStyle=getRandomColor();  
                for(var i=0;i<clos;i++){  
                    var y=drops[i]*fontSize;//也让y轴方向也向下掉一个文字的距离  
                    //Math.radom() 是0-1之间的数值  
                    //设置文字出发时间随机 str[Math.floor(Math.random()*str.length)] 让数组里面的文字索引随机出现  
                    ctx.fillText(str[Math.floor(Math.random()*str.length)],i*fontSize,y);  
                    if(y>=canvas.height&&Math.random()>0.99){  
                        drops[i]=0;  
                        }  
                    drops[i]++;//让数组里面的值每次加一，用于上面的y轴下掉  
                    }  
            }  
            setInterval(draw,40); //设置40毫秒定时器，用来调用文字绘制方法  
     </script>  
    </html>