利用JS打造黑客代碼雨效果

更新時(shí)間：2022年06月16日 14:50:00 作者：肥學(xué)

window.onload()方法用于在網(wǎng)頁(yè)加載完畢后立刻執(zhí)行的操作，即當(dāng) HTML 文檔加載完畢后，立刻執(zhí)行某個(gè)方法。本文將用window.onload()打造黑客代碼雨效果，感興趣的可以嘗試一下

演示

技術(shù)棧

js實(shí)戰(zhàn)我們也寫過(guò)很多了，其中每次幾乎都用到畫布，大家知道它的重要性了吧。今天依舊用到它了。不過(guò)我們講過(guò)它的用法就不多說(shuō)了。這次我們說(shuō)一下window.onload

window.onload() 方法用于在網(wǎng)頁(yè)加載完畢后立刻執(zhí)行的操作，即當(dāng) HTML 文檔加載完畢后，立刻執(zhí)行某個(gè)方法。

window.onload() 通常用于元素，在頁(yè)面完全載入后(包括圖片、css文件等等)執(zhí)行腳本代碼。

只有一個(gè)要執(zhí)行的函數(shù)語(yǔ)法：

window.onload = funcRef;

因?yàn)?JavaScript 中的函數(shù)方法需要在 HTML 文檔渲染完成后才可以使用，如果沒(méi)有渲染完成，此時(shí)的 DOM 樹是不完整的，這樣在調(diào)用一些 JavaScript 代碼時(shí)就可能報(bào)出"undefined"錯(cuò)誤。

所以對(duì)于一些函數(shù)功能要用window.onload

window.onload 與 jQuery ready() 區(qū)別

window.onload = function () {};    // JavaScript 
$(document).ready(function () {}); // jQuery

在這里插入圖片描述

源碼

畫布

 <canvas id="mom" style="background:#111"></canvas>

js樣式設(shè)置

  window.onload = function(){
        //獲取畫布對(duì)象
        var canvas = document.getElementById("mom");
        //獲取畫布的上下文
        //getContext() 方法返回一個(gè)用于在畫布上繪圖的環(huán)境。
        var context =canvas.getContext("2d");
        //獲取瀏覽器屏幕的寬度和高度
        var W = window.innerWidth;
        var H = window.innerHeight;
        //設(shè)置canvas的寬度和高度
        canvas.width = W;
        canvas.height = H;
        //每個(gè)文字的字體大小
        var fontSize = 16;
        //計(jì)算列
        var colunms = Math.floor(W /fontSize);
        //記錄每列文字的y軸坐標(biāo)
        var drops = [];
        //給每一個(gè)文字初始化一個(gè)起始點(diǎn)的位置
        //計(jì)算每一個(gè)文字所謂坐標(biāo) 存儲(chǔ)y軸的坐標(biāo)  
        for(var i=0;i<colunms;i++){
            drops.push(0);
        }
        //運(yùn)動(dòng)的文字
        var str ="JavaScript function(){}";
        //4:fillText(str,x,y);原理就是去更改y的坐標(biāo)位置
        //繪畫的函數(shù)
        function draw(){
            context.fillStyle = "rgba(0,0,0,0.05)";
            //fillRect() 方法繪制“已填色”的矩形。默認(rèn)的填充顏色是黑色。
            context.fillRect(0,0,W,H);
            //給字體設(shè)置樣式
            context.font = "700 "+fontSize+"px  微軟雅黑";
            //給字體添加顏色
            context.fillStyle ="#00cc33";//可以rgb,hsl, 標(biāo)準(zhǔn)色，十六進(jìn)制顏色
            //寫入畫布中
            for(var i=0;i<colunms;i++){
                var index = Math.floor(Math.random() * str.length);//設(shè)置文字出發(fā)時(shí)間隨機(jī) Math.floor(Math.random()*str.length)讓數(shù)組里面的文字索引隨機(jī)出現(xiàn)  
                var x = i*fontSize;
                var y = drops[i] *fontSize;//也讓y軸方向也向下掉一個(gè)文字的距離
                context.fillText(str[index],x,y);
                // //如果要改變時(shí)間，肯定就是改變每次他的起點(diǎn)
                if(y >= canvas.height && Math.random()>0.99){
                    drops[i] = 0;
                }
                drops[i]++;//讓數(shù)組里面的值每次加一，用于上面的y軸下掉 
            }
        };
        //隨機(jī)顏色
        function randColor(){
            var r = Math.floor(Math.random() * 256);
            var g = Math.floor(Math.random() * 256);
            var b = Math.floor(Math.random() * 256);
            return "rgb("+r+","+g+","+b+")";
        }
        draw();
        setInterval(draw,20);
    };

以上就是利用JS打造黑客代碼雨效果的詳細(xì)內(nèi)容，更多關(guān)于JS代碼雨的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: