使用canvas制作炫酷黑客帝國數(shù)字雨背景html+css+js
更新時間:2023年03月28日 16:54:46 作者:北極光之夜。
這篇文章主要介紹了使用canvas制作炫酷黑客帝國數(shù)字雨背景,html+css+js黑客帝國電影中的數(shù)字雨,非常簡單,一起來看看如何制作吧
制作:
1.定義canvas標簽:
<canvas id="canvas"></canvas>
2.開始js部分,先定義變量:
/* 獲取畫布 */ var canvas = document.querySelector("#canvas"); var ctx = canvas.getContext('2d'); /* 定義一個字符串數(shù)組,后面字符串會從里隨機選值 */ var text = "SAFAF1D56FLK43F7PHM76VC9XNJL23"; /* 定義 w為窗口寬度,h為窗體高度 */ var w=window.innerWidth; var h=window.innerHeight; /* 設(shè)置len為20,其為背景里每條字符串的長度 */ var len = 20; /* 設(shè)置num為100,窗口一共顯示100條字符串 */ var num = 100; /* 定義數(shù)組,里面存取每條字符串的字符與位置 */ var arr=[]; /* 畫布寬等于窗口寬 */ canvas.width=window.innerWidth; /* 畫布高等于窗口高 */ canvas.height=window.innerHeight;
3.初始化字符串數(shù)組,先給每條字符串位置,字符先不給:
/* 初始化字符串數(shù)組 */ for(let i=0;i<num;i++){ /* 用.push方法給arr數(shù)組添加值 */ arr.push({ /* 字符先為空 */ str:[], /* x軸位置為窗口寬度乘上一個0帶1的隨機數(shù) */ x: parseInt(w*Math.random()), /* y軸位置為窗口高度乘上一個0帶1的隨機數(shù),再減個150把,可以為負數(shù) */ y: parseInt(h*Math.random()-150) }) }
4.繪制每條字符串:
/* 繪制每條字符串 */ function txt(){ /* 給個循環(huán),共繪制num條 */ for(let i=0;i<num;i++){ /* 設(shè)置變量letter為當前arr數(shù)組里的第i條字符串 */ var letter = arr[i]; /* 讓字符串的字符為空 */ letter.str = []; /* 給個循環(huán),一個字符一個字符的拼接成字符串 */ for(let k=0;k<len;k++){ /* 隨機選取text里的一個字符 */ letter.str.push(text[Math.floor(Math.random() * text.length)]); } /* 再來循環(huán),開始繪制渲染字符串的每個字符 */ for(let j=0;j<len;j++){ if(j==len-1){ /* 第一個字符為白色 */ ctx.fillStyle = `rgb(255, 255, 255)`; }else{ /* 后面的為綠色,慢慢變不透明 */ ctx.fillStyle = `rgba(0, 255, 21,${j*0.15})`; } /* 渲染字符 */ ctx.font = "20px FangSong"; ctx.fillText(letter.str[j],letter.x,letter.y+j*15); } } /* 調(diào)用更新 */ move(); }
5.更新字符串:
/* 讓字符串移動,若某字符串出了可視區(qū),則重新生成 */ function move(){ /* 來個循環(huán),給全部字符串更新位置 */ for(let j=0;j<num;j++){ /* y軸位置加3 */ arr[j].y=arr[j].y+3; /* 如果改字符已經(jīng)走出窗口了重新賦值 */ if(arr[j].y>=h){ arr[j]={ str:[], x: parseInt(w*Math.random()), y: parseInt(h*Math.random()-150) } } } }
6.設(shè)置動畫過程:
setInterval(function(){ /* 清屏 */ ctx.clearRect(0,0,w,h); /* 渲染 */ move(); /* 更新 */ txt(); },50);
7.在窗口大小改變時,設(shè)置canvas畫布能實時鋪滿屏幕:
/* 綁定窗口大小發(fā)生改變事件,重新繪制字符串數(shù)組,讓canvas隨時鋪滿瀏覽器可視區(qū) */ window.onresize=resizeCanvas; function resizeCanvas(){ w=canvas.width=window.innerWidth; h=canvas.height=window.innerHeight; /* 重新給全部字符串賦值 */ for(let j=0;j<num;j++){ arr[j]={ str:[], x: parseInt(w*Math.random()), y: parseInt(h*Math.random()-150) } } } resizeCanvas();
完整代碼:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{ margin: 0; padding: 0; box-sizing: border-box; } body{ height: 100vh; background-color: rgb(0, 0, 0); } canvas{ position: fixed; top: 0; left: 0; z-index: -1; } h1{ font-family: 'FangSong'; position: fixed; top: 50%; left: 50%; transform: translate(-40%,-50%); font-size: 3em; color: rgb(255, 255, 255); text-shadow: 0 0 10px rgb(30, 255, 0), 0 0 20px rgb(30, 255, 0), 0 0 30px rgb(30, 255, 0), 0 0 50px rgb(30, 255, 0); } </style> </head> <body> <h1>北極光之夜。</h1> <canvas id="canvas"></canvas> <script> /* 獲取畫布 */ var canvas = document.querySelector("#canvas"); var ctx = canvas.getContext('2d'); /* 定義一個字符串數(shù)組,后面字符串會從里隨機選值 */ var text = "SAFAF1D56FLK43F7PHM76VC9XNJL23"; /* 定義 w為窗口寬度,h為窗體高度 */ var w=window.innerWidth; var h=window.innerHeight; /* 設(shè)置len為20,其為背景里每條字符串的長度 */ var len = 20; /* 設(shè)置num為100,窗口一共顯示100條字符串 */ var num = 100; /* 定義數(shù)組,里面存取每條字符串的字符與位置 */ var arr=[]; /* 畫布寬等于窗口寬 */ canvas.width=window.innerWidth; /* 畫布高等于窗口高 */ canvas.height=window.innerHeight; /* 綁定窗口大小發(fā)生改變事件,重新繪制字符串數(shù)組,讓canvas隨時鋪滿瀏覽器可視區(qū) */ window.onresize=resizeCanvas; function resizeCanvas(){ w=canvas.width=window.innerWidth; h=canvas.height=window.innerHeight; /* 重新給全部字符串賦值 */ for(let j=0;j<num;j++){ arr[j]={ str:[], x: parseInt(w*Math.random()), y: parseInt(h*Math.random()-150) } } } resizeCanvas(); /* 初始化字符串數(shù)組 */ for(let i=0;i<num;i++){ /* 用.push方法給arr數(shù)組添加值 */ arr.push({ /* 字符先為空 */ str:[], /* x軸位置為窗口寬度乘上一個0帶1的隨機數(shù) */ x: parseInt(w*Math.random()), /* y軸位置為窗口高度乘上一個0帶1的隨機數(shù),再減個150把,可以為負數(shù) */ y: parseInt(h*Math.random()-150) }) } /* 繪制每條字符串 */ function txt(){ /* 給個循環(huán),共繪制num條 */ for(let i=0;i<num;i++){ /* 設(shè)置變量letter為當前arr數(shù)組里的第i條字符串 */ var letter = arr[i]; /* 讓字符串的字符為空 */ letter.str = []; /* 給個循環(huán),一個字符一個字符的拼接成字符串 */ for(let k=0;k<len;k++){ /* 隨機選取text里的一個字符 */ letter.str.push(text[Math.floor(Math.random() * text.length)]); } /* 再來循環(huán),開始繪制渲染字符串的每個字符 */ for(let j=0;j<len;j++){ if(j==len-1){ /* 第一個字符為白色 */ ctx.fillStyle = `rgb(255, 255, 255)`; }else{ /* 后面的為綠色,慢慢變不透明 */ ctx.fillStyle = `rgba(0, 255, 21,${j*0.15})`; } /* 渲染字符 */ ctx.font = "20px FangSong"; ctx.fillText(letter.str[j],letter.x,letter.y+j*15); } } /* 調(diào)用更新 */ move(); } /* 讓字符串移動,若某字符串出了可視區(qū),則重新生成 */ function move(){ /* 來個循環(huán),給全部字符串更新位置 */ for(let j=0;j<num;j++){ /* y軸位置加3 */ arr[j].y=arr[j].y+3; /* 如果改字符已經(jīng)走出窗口了重新賦值 */ if(arr[j].y>=h){ arr[j]={ str:[], x: parseInt(w*Math.random()), y: parseInt(h*Math.random()-150) } } } } setInterval(function(){ /* 清屏 */ ctx.clearRect(0,0,w,h); /* 渲染 */ move(); /* 更新 */ txt(); },50); </script> </body> </html>
到此這篇關(guān)于使用canvas制作炫酷黑客帝國數(shù)字雨背景html+css+js的文章就介紹到這了,更多相關(guān)canvas制作數(shù)字雨背景特效html+css+js內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
使用canvas制作炫酷黑客帝國數(shù)字雨背景html+css+js
這篇文章主要介紹了使用canvas制作炫酷黑客帝國數(shù)字雨背景,html+css+js黑客帝國電影中的數(shù)字雨,非常簡單,一起來看看如何制作吧2023-03-03