Share bộ Code HTML Ma trận cực đẹp viết bằng Canvas

31/08/2018

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.

DEMO Code Ma trận

Nếu copy Code bên dưới bị lỗi thì tải Code Ma Trận ở đây

Download Code Ma trận

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>

<html>

<head>

<style>

/*basic reset */

margin: 0;

padding: 0;

}

body {background: black;}

canvas {display:block;}

</style>

</head>

<body>

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