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

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ộ :)).

Tham gia kênh Telegram của AnonyViet 👉 Link 👈

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

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>

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";

[rescue_box color=”green” text_align=”center” width=”100%” float=”none”]

Mẹo: thay bằng chữ Nhật, chữ Hàn nhìn vô nó càng huyền bí hơn[/rescue_box]

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.

Câu hỏi thường gặp

Code HTML này hoạt động như thế nào?

Code sử dụng Canvas HTML5 để tạo hiệu ứng ma trận. Nó tạo ra các ký tự ngẫu nhiên rơi xuống màn hình, mô phỏng hiệu ứng mưa ký tự quen thuộc trong phim Ma Trận.

Các bài viết liên quan

Tôi có thể tùy chỉnh văn bản hiển thị không?

Có thể! Bạn chỉ cần thay đổi giá trị của biến var matrix = "..."; trong đoạn mã bằng chuỗi văn bản mong muốn. Hãy thử các ký tự đặc biệt hoặc ngôn ngữ khác để tạo hiệu ứng độc đáo hơn.

Làm thế nào để thay đổi tốc độ rơi của ký tự?

Tốc độ rơi được điều chỉnh bởi tham số thứ hai của hàm setInterval(draw, 35);. Giá trị 35 (mili giây) càng nhỏ, ký tự sẽ rơi càng nhanh. Hãy thử thay đổi giá trị này để điều chỉnh tốc độ theo ý muốn.