If you have ever seen the movie The Matrix (Maxtrix), you must be very fond of the effects in the film. Featuring a black background and green letters falls like a waterfall. A mysterious space will appear before your eyes. If you want to have sex with your girlfriend, use this matrix html code to open the file, then press F11 for Full Screen. Then, press the keyboard to appear dangerous. You will be admired by your girlfriend :)).
| Join the channel Telegram belong to AnonyViet 👉 Link 👈 |
In this article, AnonyViet will Share the beautiful matrix HTML Code that I have collected. In addition, you can see other HTML Codes that AnonyViet has shared at Section Tips – Code
Share Code HTML Very beautiful matrix written in Canvas on HTML5
With HTML5 has strongly supported writing code and supporting graphics by Code. So, with just a few basic lines of code with canvas, you can completely create an html file with full graphic elements without the support of other languages.
If the code copy below fails, download the Matrix Code here
The code below is called “Matrix Background” will describe the simple matrix effect:
<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 the above code into notepad. Replace the content in quotes, in the line:
var matrix = "AnonyViet Dep Trai, We are AnonyViet";
Tip: replace it with Japanese, Korean characters look even more mysterious
to what you want to display on the screen. Afterward save to a *.html file and open it to enjoy. So you have a very nice matrix file in HTML5.
