js仿黑客帝國文字數字雨效果
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>黑客帝國文字下落</title> <style> html, body {margin:0; padding:0; background-color:#000;} </style> <script src="http://apps.bdimg.com/libs/jquery/1.9.0/jquery.min.js"></script> </head> <body> <canvas id="matrix" height="943" width="1920"></canvas> <script type="text/javascript"> //文字 var txts = "0123456789!@#$%^&*()~_+℃○※"; //轉為陣列 txts = txts.split(""); var matrix=document.getElementById("matrix"); var context=matrix.getContext("2d"); matrix.height=window.innerHeight; matrix.width=window.innerWidth; var drop=[]; var font_size=16; var columns=matrix.width/font_size; for(var i=0;i<columns;i++) drop[i]=1; function drawMatrix(){ context.fillStyle="rgba(0, 0, 0, 0.09)"; context.fillRect(0,0,matrix.width,matrix.height); context.fillStyle="green"; context.font=font_size+"px"; for(var i=0;i<columns;i++){ //隨機取要輸出的文字 var text = txts[Math.floor(Math.random()*txts.length)]; //輸出文字,注意座標的計算 context.fillText(text,i*font_size,drop[i]*font_size);/*get 0 and 1*/ if(drop[i]*font_size>(matrix.height*2/3)&&Math.random()>0.95)/*reset*/ drop[i]=0; drop[i]++; } } setInterval(drawMatrix,33); </script> </body> </html>
相關文章
- Android自定義View:黑客帝國數字雨AndroidView黑客
- canvas實現炫酷的黑客帝國數字雨特效Canvas黑客特效
- 黑客帝國背景效果黑客
- 【Azure Developer】App Service + PubSub +JS 實現多人版黑客帝國文字流效果圖DeveloperAPPJS黑客
- 黑客帝國來襲!黑客
- 自學python一週,看我如何用python實現黑客帝國字母雨Python黑客
- 不懂程式,能看明白「黑客帝國」嗎?黑客
- 不懂程式,能看明白《黑客帝國》嗎?黑客
- 電影《黑客帝國》的臺詞黑客
- js -- 數字轉文字JS
- 黑客帝國哲學入門=轉載黑客
- 自定義View高仿懂球帝我是教練效果View
- JS和Css實現紅包雨的效果JSCSS
- 文字框限制輸入字數的JSJS
- 程式碼雨效果
- 數字帝國主義:網際網路時代的文化入侵形式
- JS 仿騰訊發表微博的效果JS
- android仿微信表情雨下落!Android
- js實現的數字四捨五入效果JS
- 蓋茨鮑爾默曾演黑客帝國瘋狂嘲諷Linux黑客Linux
- jQuery實現的文字輸入字數倒計效果程式碼jQuery
- js實現的文字框只能夠輸入數字JS
- asp.net input文字框只能輸入數字jsASP.NETJS
- 帝國CMS靈動標籤顯示標題屬性、擷取標題字數
- PHP 仿 Word 統計文章字數PHP
- CSS3文字豎排效果CSSS3
- CSS3文字閃爍效果CSSS3
- JS 文字輸入框放大鏡效果JS
- js規定文字框只能夠輸入字母和數字JS
- CSS數字分頁效果CSS
- 仿金山打字效果
- Java 帝國之函數語言程式設計(上)Java函數程式設計
- js 漢字按照拼音排序效果JS排序
- 先行邁入《黑客帝國》的世界?英偉達的 Omniverse 構想究竟是什麼?黑客
- js保留文字的空格和換行效果JS
- js數字三位分隔效果程式碼例項JS
- js點選按鈕數字加1效果程式碼例項JS
- 後“帝國”時代:微軟在《帝國時代2》之後的RTS嘗試微軟