溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

HTML+JS實現(xiàn)“代碼雨”效果源碼（黑客帝國文字下落效果）

發(fā)布時間：2020-10-24 13:46:33 來源：腳本之家 閱讀：2089 作者：沙振宇 欄目：web開發(fā)

我們先看看HTML+JS實現(xiàn)“代碼雨”的最終效果

1、綠色：

HTML+JS實現(xiàn)“代碼雨”效果源碼（黑客帝國文字下落效果）

2、彩色：

HTML+JS實現(xiàn)“代碼雨”效果源碼（黑客帝國文字下落效果）

3、背景色：

HTML+JS實現(xiàn)“代碼雨”效果源碼（黑客帝國文字下落效果）

4、綠色逐漸變淺：

HTML+JS實現(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);
   //隨機(jī)速度 3~13之間
   var speed = parseInt(Math.random() * 10) + 3;
   //每組的x軸位置隨機(jī)產(chǎn)生
   var colx = parseInt(Math.random() * cw)
 
   //綠色隨機(jī)
   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 //隨機(jī)生成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)], //隨機(jī)生成字母數(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 顏色也隨機(jī)變化
    //ctx.fillStyle = "hsl("+(parseInt(Math.random()*359)+1)+",30%,"+(50-i*2)+"%)"; 
 
    //2 綠色逐漸變淺
    // ctx.fillStyle = "hsl(123,80%,"+(30-i*2)+"%)"; 
 
    //3 綠色隨機(jī)
    // 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>

本文主要介紹了HTML+JS實現(xiàn)“代碼雨”效果源碼，更多關(guān)于JS特效請查看下面的相關(guān)鏈接

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手