Nếu bạn đã từng xem những bộ phim liên qua đến Hacker hay mã Code thì bạn sẽ không còn xa lạ gì với những hiệu ứng ma trận trong phim cả. Vì vậy hôm nay mình sẽ mang đến cho các bạn bộ code HTML tạo ma trận cực xịn.
Share Code HTML Ma trận cực đẹp viết bằng Canvas trên HTML5
Với HTML5 đã hổ trợ mạnh mẽ việc viết code và hổ trợ đồ họa bằng Code. Vì vậy, chỉ với vài dòng code cơ bản với canvas, bạn hoàn toàn có thể tạo ra 1 file html có đầy đủ yếu tố đồ họa mà không cần sự hổ trợ của các ngôn ngữ khác.
Xem Demo
Đầu tiên hãy cùng xem Demo qua link bên dưới nhé.
Tải xuống mã Code
Bạn có thể tải xuống bộ mã Code qua link dưới.
Nếu bạn không thể tải xuống hoặc lỗi thì mình sẽ để code bên dưới.
<html>
<head>
<style>
/*basic reset */
*{
margin: 0;
padding: 0;
}
body {background: black;}
canvas {display:block;}
</style>
</head>
<body>
<canvas id="c"></canvas>
<script>
// geting canvas by id c
var c = document.getElementById("c");
var ctx = c.getContext("2d");
//making the canvas full screen
c.height = window.innerHeight;
c.width = window.innerWidth;
//characters - taken from the unicode charset
var matrix = "CODE THINK IS KING, CODE THINK NUMBER ONE";
//converting the string into an array of single characters
matrix = matrix.split("");
var font_size = 10;
var columns = c.width/font_size; //number of columns for the rain
//an array of drops - one per column
var drops = [];
//x below is the x coordinate
//1 = y co-ordinate of the drop(same for every drop initially)
for(var x = 0; x < columns; x++)
drops[x] = 1;
//drawing the characters
function draw()
{
//Black BG for the canvas
//translucent BG to show trail
ctx.fillStyle = "rgba(0, 0, 0, 0.04)";
ctx.fillRect(0, 0, c.width, c.height);
ctx.fillStyle = "#0F0"; //green text
ctx.font = font_size + "px arial";
//looping over drops
for(var i = 0; i < drops.length; i++)
{
//a random chinese character to print
var text = matrix[Math.floor(Math.random()*matrix.length)];
//x = i*font_size, y = value of drops[i]*font_size
ctx.fillText(text, i*font_size, drops[i]*font_size);
//sending the drop back to the top randomly after it has crossed the screen
//adding a randomness to the reset to make the drops scattered on the Y axis
if(drops[i]*font_size > c.height && Math.random() > 0.975)
drops[i] = 0;
//incrementing Y coordinate
drops[i]++;
}
}
setInterval(draw, 35);
</script>
</body>
</html>
Lưu ý: Thay giá trị của
Sau khi tải xuống hoặc copy xong thì bạn hãy dán vào Notepad rồi save lại thành file và mở lên để thưởng thức.