Nếu bạn đã từng xem qua phim Ma Trận (Maxtrix) hẵn là bạn rất mê các hiệu ứng trong phim. Với đặc điểm là nền màu đen và chữ màu xanh lá cây đổ xuống như thác nước. Một không gian huyền bí sẽ hiện ra trước mắt bạn. Ông nào muốn lấy le với bạn gái thì dùng code html ma trận này mở file, rồi nhấn F11 cho Full Screen. Sau đó, bấm bấm bàn phím sao cho tỏ ra vẻ nguy hiểm. Bạn sẽ được bạn gái ngưỡng mộ :)).
Trong bài này, AnonyViet sẽ Share Code HTML ma trận cực đẹp do mình sưu tầm được. Ngoài ra bạn có thể xem các Code HTML khác mà AnonyViet đã share tại Mục Thủ thuật – Code
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.
Nếu copy Code bên dưới bị lỗi thì tải Code Ma Trận ở đây
Bộ code dưới đây có tên là “Matrix Background” sẽ mô tả hiệu ứng ma trận đơn giản:
<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 = "AnonyViet Dep Trai, We are AnonyViet";
//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>
Copy đoạn code trên vào notepad. Thay nội dung trong ngoặc kép, ở dòng:
var matrix = "AnonyViet Dep Trai, We are AnonyViet";
Mẹo: thay bằng chữ Nhật, chữ Hàn nhìn vô nó càng huyền bí hơn
thành nội dung bạn muốn hiển thị trên màn hình. Sau đó save lại thành file *.html và mở lên để thưởng thức. Như vậy bạn đã có 1 file ma trận cực đẹp bằng HTML5.
Ad cho e xin link FB được không ạ.
Cám ơn tất cả các bài viết hữu ích của a. Chúc a sức khoẻ và nhiều bài viết hay hơn nữa.
https://www.facebook.com/anonyvietdotcom/
https://www.facebook.com/groups/anonyviet/
bạn tham gia ở đây
Đẹp vậy ad ơi, e rất thíc
cảm ơn bạn, mình sẽ chia sẻ nhiều hơn