Donate - Buy me a Coffe Donate!

HTML - Share code HTML ma trận cực đẹp viết bằng Canvas

HTML - Share code HTML ma trận cực đẹp viết bằng Canvas,ma trận,html5,hacker
HTML - Share code HTML ma trận cực đẹp viết bằng Canvas

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 var matrix = "CODE THINK IS KING, CODE THINK NUMBER ONE";

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 .html và mở lên để thưởng thức.

Getting Info...

Đăng nhận xét

Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.