使用canvas制作炫酷黑客帝國(guó)數(shù)字雨背景html+css+js

更新時(shí)間：2023年03月28日 16:54:46 作者：北極光之夜。

這篇文章主要介紹了使用canvas制作炫酷黑客帝國(guó)數(shù)字雨背景，html+css+js黑客帝國(guó)電影中的數(shù)字雨,非常簡(jiǎn)單,一起來(lái)看看如何制作吧

1.定義canvas標(biāo)簽：
2.開(kāi)始js部分，先定義變量：
3.初始化字符串?dāng)?shù)組，先給每條字符串位置，字符先不給：
4.繪制每條字符串：
5.更新字符串：
6.設(shè)置動(dòng)畫(huà)過(guò)程：
7.在窗口大小改變時(shí)，設(shè)置canvas畫(huà)布能實(shí)時(shí)鋪滿(mǎn)屏幕：

完整代碼：

制作：

1.定義canvas標(biāo)簽：

<canvas id="canvas"></canvas>

2.開(kāi)始js部分，先定義變量：

         /* 獲取畫(huà)布 */
        var canvas = document.querySelector("#canvas");
        var ctx = canvas.getContext('2d');
        /* 定義一個(gè)字符串?dāng)?shù)組，后面字符串會(huì)從里隨機(jī)選值 */
        var text = "SAFAF1D56FLK43F7PHM76VC9XNJL23";
        /* 定義 w為窗口寬度，h為窗體高度 */
        var w=window.innerWidth;
        var h=window.innerHeight;
        /* 設(shè)置len為20，其為背景里每條字符串的長(zhǎng)度 */
        var len = 20;
        /* 設(shè)置num為100，窗口一共顯示100條字符串 */
        var num = 100;
        /* 定義數(shù)組，里面存取每條字符串的字符與位置 */
        var arr=[];
        /* 畫(huà)布寬等于窗口寬 */
        canvas.width=window.innerWidth;
        /* 畫(huà)布高等于窗口高 */
        canvas.height=window.innerHeight;

3.初始化字符串?dāng)?shù)組，先給每條字符串位置，字符先不給：

 /* 初始化字符串?dāng)?shù)組 */
         for(let i=0;i<num;i++){
             /* 用.push方法給arr數(shù)組添加值 */
             arr.push({
                 /* 字符先為空 */
                 str:[],
                 /* x軸位置為窗口寬度乘上一個(gè)0帶1的隨機(jī)數(shù) */
                 x: parseInt(w*Math.random()),
                 /* y軸位置為窗口高度乘上一個(gè)0帶1的隨機(jī)數(shù)，再減個(gè)150把，可以為負(fù)數(shù) */
                 y: parseInt(h*Math.random()-150)
             })
         }

4.繪制每條字符串：

 /* 繪制每條字符串 */
        function txt(){
            /* 給個(gè)循環(huán)，共繪制num條 */
            for(let i=0;i<num;i++){
                /* 設(shè)置變量letter為當(dāng)前arr數(shù)組里的第i條字符串 */
                var letter = arr[i];
                /* 讓字符串的字符為空 */
                letter.str = [];
                /* 給個(gè)循環(huán)，一個(gè)字符一個(gè)字符的拼接成字符串 */
                for(let k=0;k<len;k++){
                    /* 隨機(jī)選取text里的一個(gè)字符 */
                    letter.str.push(text[Math.floor(Math.random() * text.length)]);
                }
                /* 再來(lái)循環(huán)，開(kāi)始繪制渲染字符串的每個(gè)字符 */
                for(let j=0;j<len;j++){
                    if(j==len-1){
                        /* 第一個(gè)字符為白色 */
                        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.更新字符串：

 /* 讓字符串移動(dòng)，若某字符串出了可視區(qū)，則重新生成 */
        function move(){
            /* 來(lái)個(gè)循環(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è)置動(dòng)畫(huà)過(guò)程：

 setInterval(function(){
             /* 清屏 */
            ctx.clearRect(0,0,w,h);
            /* 渲染 */
            move();
            /* 更新 */
            txt();
         },50);

7.在窗口大小改變時(shí)，設(shè)置canvas畫(huà)布能實(shí)時(shí)鋪滿(mǎn)屏幕：

/* 綁定窗口大小發(fā)生改變事件，重新繪制字符串?dāng)?shù)組，讓canvas隨時(shí)鋪滿(mǎn)瀏覽器可視區(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>
        /* 獲取畫(huà)布 */
        var canvas = document.querySelector("#canvas");
        var ctx = canvas.getContext('2d');
        /* 定義一個(gè)字符串?dāng)?shù)組，后面字符串會(huì)從里隨機(jī)選值 */
        var text = "SAFAF1D56FLK43F7PHM76VC9XNJL23";
        /* 定義 w為窗口寬度，h為窗體高度 */
        var w=window.innerWidth;
        var h=window.innerHeight;
        /* 設(shè)置len為20，其為背景里每條字符串的長(zhǎng)度 */
        var len = 20;
        /* 設(shè)置num為100，窗口一共顯示100條字符串 */
        var num = 100;
        /* 定義數(shù)組，里面存取每條字符串的字符與位置 */
        var arr=[];
        /* 畫(huà)布寬等于窗口寬 */
        canvas.width=window.innerWidth;
        /* 畫(huà)布高等于窗口高 */
        canvas.height=window.innerHeight;
        /* 綁定窗口大小發(fā)生改變事件，重新繪制字符串?dāng)?shù)組，讓canvas隨時(shí)鋪滿(mǎn)瀏覽器可視區(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();
         /* 初始化字符串?dāng)?shù)組 */
         for(let i=0;i<num;i++){
             /* 用.push方法給arr數(shù)組添加值 */
             arr.push({
                 /* 字符先為空 */
                 str:[],
                 /* x軸位置為窗口寬度乘上一個(gè)0帶1的隨機(jī)數(shù) */
                 x: parseInt(w*Math.random()),
                 /* y軸位置為窗口高度乘上一個(gè)0帶1的隨機(jī)數(shù)，再減個(gè)150把，可以為負(fù)數(shù) */
                 y: parseInt(h*Math.random()-150)
             })
         }

        /* 繪制每條字符串 */
        function txt(){
            /* 給個(gè)循環(huán)，共繪制num條 */
            for(let i=0;i<num;i++){
                /* 設(shè)置變量letter為當(dāng)前arr數(shù)組里的第i條字符串 */
                var letter = arr[i];
                /* 讓字符串的字符為空 */
                letter.str = [];
                /* 給個(gè)循環(huán)，一個(gè)字符一個(gè)字符的拼接成字符串 */
                for(let k=0;k<len;k++){
                    /* 隨機(jī)選取text里的一個(gè)字符 */
                    letter.str.push(text[Math.floor(Math.random() * text.length)]);
                }
                /* 再來(lái)循環(huán)，開(kāi)始繪制渲染字符串的每個(gè)字符 */
                for(let j=0;j<len;j++){
                    if(j==len-1){
                        /* 第一個(gè)字符為白色 */
                        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();
        }
         
        /* 讓字符串移動(dòng)，若某字符串出了可視區(qū)，則重新生成 */
        function move(){
            /* 來(lái)個(gè)循環(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制作炫酷黑客帝國(guó)數(shù)字雨背景html+css+js的文章就介紹到這了,更多相關(guān)canvas制作數(shù)字雨背景特效html+css+js內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

軟件下載

源碼下載

軟件編程

網(wǎng)絡(luò)編程

在線(xiàn)工具

數(shù)據(jù)庫(kù)

CMS

常用工具

使用canvas制作炫酷黑客帝國(guó)數(shù)字雨背景html+css+js

目錄

制作：

1.定義canvas標(biāo)簽：

2.開(kāi)始js部分，先定義變量：

3.初始化字符串?dāng)?shù)組，先給每條字符串位置，字符先不給：

4.繪制每條字符串：

5.更新字符串：

6.設(shè)置動(dòng)畫(huà)過(guò)程：

7.在窗口大小改變時(shí)，設(shè)置canvas畫(huà)布能實(shí)時(shí)鋪滿(mǎn)屏幕：

完整代碼：

相關(guān)文章

最新評(píng)論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線(xiàn)小工具

使用canvas制作炫酷黑客帝國(guó)數(shù)字雨背景html+css+js

目錄

制作：

1.定義canvas標(biāo)簽：

2.開(kāi)始js部分，先定義變量：

3.初始化字符串?dāng)?shù)組，先給每條字符串位置，字符先不給：

4.繪制每條字符串：

5.更新字符串：

6.設(shè)置動(dòng)畫(huà)過(guò)程：

7.在窗口大小改變時(shí)，設(shè)置canvas畫(huà)布能實(shí)時(shí)鋪滿(mǎn)屏幕：

完整代碼：

相關(guān)文章

最新評(píng)論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線(xiàn)小工具

2.開(kāi)始js部分，先定義變量：

3.初始化字符串?dāng)?shù)組，先給每條字符串位置，字符先不給：

7.在窗口大小改變時(shí)，設(shè)置canvas畫(huà)布能實(shí)時(shí)鋪滿(mǎn)屏幕：