第利用JS打造黑客代碼雨效果目錄演示技術棧源碼畫布js樣式設置

演示

技術棧

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樹是不完整的，這樣在調(diào)用一些JavaScript代碼時就可能報出undefined錯誤。

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

window.onload與jQueryready()區(qū)別

window.onload=function(){};//JavaScript

$(document).ready(function(){});//jQuery

源碼

畫布

canvasid="mom"/canvas

js樣式設置

window.onload=function(){

//獲取畫布對象

varcanvas=document.getElementById("mom");

//獲取畫布的上下文

//getContext()方法返回一個用于在畫布上繪圖的環(huán)境。

varcontext=canvas.getContext("2d");

//獲取瀏覽器屏幕的寬度和高度

varW=window.innerWidth;

varH=window.innerHeight;

//設置canvas的寬度和高度

canvas.width=W;

canvas.height=H;

//每個文字的字體大小

varfontSize=16;

//計算列

varcolunms=Math.floor(W/fontSize);

//記錄每列文字的y軸坐標

vardrops=[];

//給每一個文字初始化一個起始點的位置

//計算每一個文字所謂坐標存儲y軸的坐標

for(vari=0;icolunms;i++){

drops.push(0);

//運動的文字

varstr="JavaScriptfunction(){}";

//4:fillText(str,x,y);原理就是去更改y的坐標位置

//繪畫的函數(shù)

functiondraw(){

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(vari=0;icolunms;i++){

varindex=Math.floor(Math.random()*str.length);//設置文字出發(fā)時間隨機Math.floor(Math.random()*str.length)讓數(shù)組里面的文字索引隨機出現(xiàn)

varx=i*fontSize;

vary=drops[i]*fontSize;//也讓y軸方向也向下掉一個文字的距離

context.fillText(str[index],x,y);

////如果要改變時間，肯定就是改變每次他的起點

if(y=canvas.heightMath.random()0.99){

drops[i]=0;

drops[i]++;//讓數(shù)組里面的值每次加一，用于上面的y軸下掉

//隨機顏色

functionrandColor(){

varr=Math.floor(Math.random()*256);

varg=Math.floor(Math.random()*256);

varb=Math.floor(Math.random()*256);

return"rgb("