html5实现黑客帝国数字矩阵效果

来源：互联网发布：mac单机游戏推荐编辑：程序博客网时间：2024/05/17 22:28

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Martrix</title>
<style>
body {
margin: 0;
padding: 0;
background-color: #000;
overflow: hidden;
color:#e6922a;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>

<script type="text/javascript">
var canvas = document.getElementById("canvas"),
context = canvas.getContext("2d");

var fontSize = 14,
listText = "0123456789ABCDEF".split(""),
column, row,
listColumn = [];

function draw() {
//画背景
context.fillStyle = "rgba(0, 0, 0, 0.05)";
context.fillRect(0, 0, canvas.width, canvas.height);
context.save();

//画Logo
context.shadowColor = "#074425";
context.shadowBlur = parseInt(Math.random() * 40 + 1);
context.font = "bold 36px Arial";
context.fillStyle = "#eefbf5";
context.fillText("MARTRIX", (canvas.width / 2 - context.measureText("MARTRIX").width / 2), canvas.height - 200);
context.fillText("REVOLUTIONS", (canvas.width / 2 - context.measureText("REVOLUTIONS").width / 2), canvas.height - 150);
context.font = "16px Microsoft Yahei";
context.fillText("HACK MATRIX MADE BY XH", (canvas.width / 2 - context.measureText("HACK MATRIX MADE BY XH").width / 2), canvas.height - 100);

//画代码
context.restore();
context.font = "normal " + fontSize + "px Arial";
context.fillStyle = "#12ee46";
for (var i = 0; i < column; i++) {
if (Math.random() > 0.5) {
var str = listText[parseInt(Math.random() * listText.length)];
context.fillText(str, i * fontSize, listColumn[i] * fontSize);
listColumn[i] += 1;
if (listColumn[i] >= row) {
listColumn[i] = 0;
}
}
}
}

function resize() {
canvas.width = window.innerWidth - 3;
canvas.height = window.innerHeight - 3;

column = canvas.width / fontSize,
row = canvas.height / fontSize;

for (var i = 0; i < column; i++) {
listColumn[i] = 1;
}
}

window.addEventListener("resize", resize);

canvas.addEventListener("mousedown", function () {
clearInterval(timer);
timer = setInterval(draw, 20);
});

canvas.addEventListener("mouseup", function () {
clearInterval(timer);
timer = setInterval(draw, 40);
});

resize();
var timer = setInterval(draw, 40);

</script>
</body>

</html>

0 0