程式碼雨的實現 linux or html
阿新 • • 發佈：2018-11-20
文章目錄
1、linux 程式碼雨的實現
執行
1） sudo apt-get install cmatrix
2）cmatrix
效果：
2、 html 檔案實現
1）新建檔案
test.html
2) 複製一下程式碼
<!DOCTYPE html> <html> <head> <meta 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 = []; //程式碼雨陣列 var cols = parseInt(cw/14); //程式碼雨列數 var step = 16 ; //步長，每一列內部數字之間的上下間隔 ctx.font = "bold 26px microsoft yahei"; //宣告字型，個人喜歡微軟雅黑 function createColorCv() { //畫布基本顏色 ctx.fillStyle="#242424"; ctx.fillRect(0,0,cw,ch); } //建立程式碼雨 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)], //隨機生成字母陣列中的一個 color : "rgb("+rgbr+','+rgbg+','+rgbb+")" } col.push(code); } codeRainArr.push(col); } } //程式碼雨下起來 function codeRaining(){ //把畫布擦乾淨 ctx.clearRect(0,0,cw,ch); //建立有顏色的畫布 //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; } //顏色也隨機變化 //ctx.fillStyle = "hsl("+(parseInt(Math.random()*359)+1)+",30%,"+(50-i*2)+"%)"; //綠色逐漸變淺 //ctx.fillStyle = "hsl(123,30%,"+(30-i*2)+"%)"; //綠色隨機 //var r= 0; //var g= parseInt(Math.random()*255) + 3; //var b= 0; //ctx.fillStyle = "rgb("+r+','+g+','+b+")" ctx.fillStyle = code.color; //把程式碼畫出來 ctx.fillText(code.text,code.x,code.y); } } requestAnimationFrame(codeRaining); } //建立程式碼雨 createCodeRain(); //開始下雨吧 GO>> requestAnimationFrame(codeRaining); </script> </body> </html>
3）雙擊 新建 網頁檔案
效果：
檔案參考：
“程式碼雨”純HTML原始碼實現及效果
https://blog.csdn.net/u014597198/article/details/71412881