當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
JS特效——黑客效果JS代码（摘取）
生活随笔
收集整理的這篇文章主要介紹了
JS特效——黑客效果JS代码（摘取）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
示例一?
<html> <head><title>The Matrix</title><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"type="text/javascript"></script><meta charset="utf-8"><script>/*① 用setInterval(draw, 33)設定刷新間隔② 用String.fromCharCode(1e2+Math.random()*33)隨機生成字母③ 用ctx.fillStyle=’rgba(0,0,0,.05)’; ctx.fillRect(0,0,width,height); ctx.fillStyle=’#0F0′; 反復生成opacity為0.5的半透明黑色背景④ 用x = (index * 10)+10;和yPositions[index] = y + 10;順序確定顯示字母的位置⑤ 用fillText(text, x, y); 在指定位置顯示一個字母 以上步驟循環進行，就會產生《黑客帝國》的片頭效果。*/$(document).ready(function () {var s = window.screen;var width = q.width = s.width;var height = q.height;var yPositions = Array(300).join(0).split('');var ctx = q.getContext('2d');var draw = function () {ctx.fillStyle = 'rgba(0,0,0,.05)';ctx.fillRect(0, 0, width, height);ctx.fillStyle = 'red';ctx.font = '10pt Georgia';yPositions.map(function (y, index) {text = String.fromCharCode(1e2 + Math.random() * 33);x = (index * 10) + 10;q.getContext('2d').fillText(text, x, y);if (y > Math.random() * 1e4) {yPositions[index] = 0;} else {yPositions[index] = y + 10;}});};RunMatrix();function RunMatrix() {Game_Interval = setInterval(draw, 30);}});</script> </head> <body><div align="center"><canvas id="q" width="500" height="500"></canvas></div> </body> </html>示例二
<html> <head><title>Do You Know HACKER-2</title><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"type="text/javascript"></script> </head><body><div align="center"><canvas id="myCanvas" width="1024" height="800" style="border:1px solid #c3c3c3;">Your browser does not support the HTML5 canvas tag.</canvas><script type="text/javascript">var YPositions = Array(51).join(0).split('');/*join() 方法用于把數組中的所有元素放入一個字符串split() 方法用于把一個字符串分割成字符串數組*/var c = document.getElementById("myCanvas");var ctx = c.getContext("2d");var draw = function () {ctx.fillStyle = 'rgba(0,0,0,.05)';ctx.fillRect(0, 0, 1024, 800); ctx.fillStyle = "#0f0";YPositions.map(function (y, index) {/*map() 把每個元素通過函數傳遞到當前匹配集合中，生成包含返回值的新的 jQuery 對象*/x = (index * 10);ctx.fillText(parseInt(Math.random() * 10), x, y);/*在(x,y)坐標位產生一個'a'字符index為Ypositions的下標*/if (y > 500) {YPositions[index] = 0;} else {YPositions[index] = y + 10;}/*如果新產生的字符已經到了<canvas>的辯解那么就使產生下一個新字符的位置回歸到原點*/});};setInterval(draw, 30);</script> </body> </html>示例三
<html> <head><title>Do You Know HACKER-1</title><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> </head><body><div align="center"><canvas id="myCanvasMatrix" width="500" height="200" style="border:1px solid #c3c3c3;"><!-- <canvas>標簽在IE9以下的瀏覽器中并不被支持 -->Please Upgrade your browser</canvas><br><button type="button" id="puse">puse</button><button type="button" id="run">run</button></div><script type="text/javascript">$(document).ready(function() {/*var c2 = document.getElementById("myCanvasMatrix");var ctx2 = c2.getContext("2d");其中 'ctx2' 就等同于下面的 'ctx1'*/var ctx1 = $("#myCanvasMatrix").get(0).getContext("2d");/*其中$("").get(0)表示獲取內部的DOM對象引用也就是：獲取到對象的dom對象后就可以使用對應的dom API*//*getContext() 方法返回一個用于在畫布上繪圖的環境。Canvas.getContext(contextID);其中contextID參數當前唯一的合法值為'2d'，也就是支持了二維繪圖未來可能會支持'3d'這個參數哦~*/var Matrix=function(){/*var my_gradient=ctx1.createLinearGradient(0,0,0,170);my_gradient.addColorStop(0,"black");my_gradient.addColorStop(1,"white");ctx1.fillStyle=my_gradient;*/ctx1.fillStyle = 'rgba(0,0,0,.07)';/*fillStyle 屬性設置或返回用于填充繪畫的顏色、漸變或模式。rgba(R,G,B,A)其中'.05'代表阿爾法透明度*/ctx1.fillRect(0,0,500,500);/*fillRect() 方法使用 fillStyle 屬性所指定的顏色、漸變和模式來填充指定的矩形*/ctx1.fillStyle = "#0f0";ctx1.fillText('zhengbin', Math.random()*(500), Math.random()*(500));ctx1.fillText('cnblogs', Math.random()*(500), Math.random()*(500));/*其原理就是不停的產生新的有透明度的背景和要顯示的內容，這樣新的背景不停的覆蓋舊的顯示內容新的內容就突顯了出來*/};runFun();var id;function stopFun(){clearInterval(id);}function runFun(){id = setInterval(Matrix,50);/*setInterval() 定義和用法:setInterval() 方法可按照指定的周期（以毫秒計）來調用函數或計算表達式。setInterval() 方法會不停地調用函數，直到 clearInterval() 被調用或窗口被關閉。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的參數。*/}$("button#puse").click(function() {stopFun();});$("button#run").click(function() {runFun();});});</script> </body> </html>示例四
?
<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"><meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"></head><body><canvas id="content" width="1250px" height="602px"></canvas></body></html><script>var cav = document.getElementById('content');var w = window.screen.width;var h = window.screen.height;var yPositions = Array(300).join(0).split('');var ctx = cav.getContext('2d');var draw = function(){ctx.fillStyle = 'rgba(0,0,0,.05)';ctx.fillRect(0,0,w,h);ctx.fillStyle = 'green';ctx.font = '20px';yPositions.map(function(y,index){text = String.fromCharCode(1e2+Math.random()*330);x = index*10;cav.getContext('2d').fillText(text,x,y);if(y>Math.random()*1e4){yPositions[index]=0;}else{yPositions[index]=y+10;}});}setInterval('draw()',30);</script>?
參考文章
https://www.cnblogs.com/fenger-VIP/p/7651562.html
總結
以上是生活随笔為你收集整理的JS特效——黑客效果JS代码（摘取）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： JavaScript——自定义对话框
- 下一篇： JavaScript——分时问候