欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間：2020年03月17日 16:10:53   作者：沙振宇  
這篇文章主要介紹了HTML+JS實現(xiàn)“代碼雨”效果源碼類似黑客帝國文字下落效果,需要的朋友可以參考下

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

1、綠色：

2、彩色：

3、背景色：

4、綠色逐漸變淺：

源代碼：

<!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;  //步長，每一列內部數(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 = [];
   //基礎位置，為了列與列之間產生錯位
   var basePos = parseInt(Math.random() * 300);
   //隨機速度 3~13之間
   var speed = parseInt(Math.random() * 10) + 3;
   //每組的x軸位置隨機產生
   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>

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

相關文章

最新評論