欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

一招實現(xiàn)“代碼雨”的方法

這篇文章主要介紹“一招實現(xiàn)“代碼雨”的方法”，在日常操作中，相信很多人在一招實現(xiàn)“代碼雨”的方法問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”一招實現(xiàn)“代碼雨”的方法”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！

超過10余年行業(yè)經(jīng)驗，技術(shù)領(lǐng)先，服務(wù)至上的經(jīng)營模式，全靠網(wǎng)絡(luò)和口碑獲得客戶，為自己降低成本，也就是為客戶降低成本。到目前業(yè)務(wù)范圍包括了：成都網(wǎng)站制作、成都網(wǎng)站建設(shè)，成都網(wǎng)站推廣，成都網(wǎng)站優(yōu)化，整體網(wǎng)絡(luò)托管，重慶小程序開發(fā)，微信開發(fā)，app軟件開發(fā)，同時也可以讓客戶的網(wǎng)站和網(wǎng)絡(luò)營銷和我們一樣獲得訂單和生意！

一招實現(xiàn)“代碼雨”的方法

先看看效果

1、綠色：

一招實現(xiàn)“代碼雨”的方法

2、彩色：

一招實現(xiàn)“代碼雨”的方法

3、背景色：

一招實現(xiàn)“代碼雨”的方法

4、綠色逐漸變淺：

一招實現(xiàn)“代碼雨”的方法

源代碼：

<!DOCTYPE html>
<html>
   
<head>   
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>Code -by ZhenYu.Sha</title>
    <style type="text/css">
        html, body {
            width: 100%;
            height: 100%;
        }
        body {
            background: #000;
            overflow: hidden;
            margin: 0;
            padding: 0;
        }
    </style>
</head>
   
<body>  
<canvas id="cvs"></canvas>
<script type="text/javascript">
    var cvs = document.getElementById("cvs");
    var ctx = cvs.getContext("2d");
    var cw = cvs.width = document.body.clientWidth;
    var ch = cvs.height = document.body.clientHeight;
    //動畫繪制對象
    var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
    var codeRainArr = []; //代碼雨數(shù)組
    var cols = parseInt(cw / 14); //代碼雨列數(shù)
    var step = 16;    //步長，每一列內(nèi)部數(shù)字之間的上下間隔
    ctx.font = "bold 26px microsoft yahei"; //聲明字體，個人喜歡微軟雅黑

    function createColorCv() {
        //畫布基本顏色
        ctx.fillStyle = "#242424";
        ctx.fillRect(0, 0, cw, ch);
    }

    //創(chuàng)建代碼雨
    function createCodeRain() {
        for (var n = 0; n < cols; n++) {
            var col = [];
            //基礎(chǔ)位置，為了列與列之間產(chǎn)生錯位
            var basePos = parseInt(Math.random() * 300);
            //隨機速度 3~13之間
            var speed = parseInt(Math.random() * 10) + 3;
            //每組的x軸位置隨機產(chǎn)生
            var colx = parseInt(Math.random() * cw)

            //綠色隨機
            var rgbr = 0;
            var rgbg = parseInt(Math.random() * 255);
            var rgbb = 0;
            //ctx.fillStyle = "rgb("+r+','+g+','+b+")"

            for (var i = 0; i < parseInt(ch / step) / 2; i++) {
                var code = {
                    x: colx,
                    y: -(step * i) - basePos,
                    speed: speed,
                    //  text : parseInt(Math.random()*10)%2 == 0 ? 0 : 1  //隨機生成0或者1
                    text: ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "s", "t", "u", "v", "w", "x", "y", "z"][parseInt(Math.random() * 11)], //隨機生成字母數(shù)組中的一個
                    color: "rgb(" + rgbr + ',' + rgbg + ',' + rgbb + ")"
                }
                col.push(code);
            }
            codeRainArr.push(col);
        }
    }

    //代碼雨下起來
    function codeRaining() {
        //把畫布擦干凈
        ctx.clearRect(0, 0, cw, ch);
        //創(chuàng)建有顏色的畫布
        //createColorCv();
        for (var n = 0; n < codeRainArr.length; n++) {
            //取出列
            col = codeRainArr[n];
            //遍歷列，畫出該列的代碼
            for (var i = 0; i < col.length; i++) {
                var code = col[i];
                if (code.y > ch) {
                    //如果超出下邊界則重置到頂部
                    code.y = 0;
                } else {
                    //勻速降落
                    code.y += code.speed;
                }
                
                //1 顏色也隨機變化
                //ctx.fillStyle = "hsl("+(parseInt(Math.random()*359)+1)+",30%,"+(50-i*2)+"%)"; 

                //2 綠色逐漸變淺
                // ctx.fillStyle = "hsl(123,80%,"+(30-i*2)+"%)"; 

                //3 綠色隨機
                // var r= 0;
                // var g= parseInt(Math.random()*255) + 3;
                // var b= 0;
                // ctx.fillStyle = "rgb("+r+','+g+','+b+")";

                //4 一致綠
                ctx.fillStyle = code.color;


                //把代碼畫出來
                ctx.fillText(code.text, code.x, code.y);
            }
        }
        requestAnimationFrame(codeRaining);
    }

    //創(chuàng)建代碼雨
    createCodeRain();
    //開始下雨吧 GO>>
    requestAnimationFrame(codeRaining);
</script>
   
</body>
</html>

到此，關(guān)于“一招實現(xiàn)“代碼雨”的方法”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>

文章題目：一招實現(xiàn)“代碼雨”的方法
本文地址：http://chinadenli.net/article30/jpsopo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供小程序開發(fā)、企業(yè)建站、外貿(mào)建站、ChatGPT、虛擬主機、App開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

微信小程序開發(fā)