<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>
