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

更新時間：2022年06月16日 14:50:00 作者：肥學

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

演示

技術棧

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

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

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

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

window.onload = funcRef;

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

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

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

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

在這里插入圖片描述

源碼

畫布

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

js樣式設置

  window.onload = function(){
        //獲取畫布對象
        var canvas = document.getElementById("mom");
        //獲取畫布的上下文
        //getContext() 方法返回一個用于在畫布上繪圖的環(huán)境。
        var context =canvas.getContext("2d");
        //獲取瀏覽器屏幕的寬度和高度
        var W = window.innerWidth;
        var H = window.innerHeight;
        //設置canvas的寬度和高度
        canvas.width = W;
        canvas.height = H;
        //每個文字的字體大小
        var fontSize = 16;
        //計算列
        var colunms = Math.floor(W /fontSize);
        //記錄每列文字的y軸坐標
        var drops = [];
        //給每一個文字初始化一個起始點的位置
        //計算每一個文字所謂坐標 存儲y軸的坐標  
        for(var i=0;i<colunms;i++){
            drops.push(0);
        }
        //運動的文字
        var str ="JavaScript function(){}";
        //4:fillText(str,x,y);原理就是去更改y的坐標位置
        //繪畫的函數(shù)
        function draw(){
            context.fillStyle = "rgba(0,0,0,0.05)";
            //fillRect() 方法繪制“已填色”的矩形。默認的填充顏色是黑色。
            context.fillRect(0,0,W,H);
            //給字體設置樣式
            context.font = "700 "+fontSize+"px  微軟雅黑";
            //給字體添加顏色
            context.fillStyle ="#00cc33";//可以rgb,hsl, 標準色，十六進制顏色
            //寫入畫布中
            for(var i=0;i<colunms;i++){
                var index = Math.floor(Math.random() * str.length);//設置文字出發(fā)時間隨機 Math.floor(Math.random()*str.length)讓數(shù)組里面的文字索引隨機出現(xiàn)  
                var x = i*fontSize;
                var y = drops[i] *fontSize;//也讓y軸方向也向下掉一個文字的距離
                context.fillText(str[index],x,y);
                // //如果要改變時間，肯定就是改變每次他的起點
                if(y >= canvas.height && Math.random()>0.99){
                    drops[i] = 0;
                }
                drops[i]++;//讓數(shù)組里面的值每次加一，用于上面的y軸下掉 
            }
        };
        //隨機顏色
        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打造黑客代碼雨效果的詳細內容，更多關于JS代碼雨的資料請關注腳本之家其它相關文章！

您可能感興趣的文章: