• Network
    • Mạng cơ bản
    • Hyper-V
    • Linux
    • Windown Server 2012
  • Security
    • Basic Hacking
    • Deface
    • DDOS
    • Kali Linux / Parrot
    • SQL Injection
    • Virus-Trojan-Rat
  • Thủ thuật
    • Khóa Học Miễn Phí
    • Code
    • Mẹo Vặt Máy Tính
    • Facebook
    • Windows 7/8/10
    • Đồ Họa
    • Video
  • Software
    • Phần mềm máy tính
    • Phần mềm điện thoại
  • MMO
    • Advertisers – Publishers
    • Affiliate Program
    • Kiếm tiền bằng điện thoại
    • Pay Per Click – PPC
  • Tin tức
  • Kiến thức
AnonyViet
  • Network
    • Mạng cơ bản
    • Hyper-V
    • Linux
    • Windown Server 2012
  • Security
    • Basic Hacking
    • Deface
    • DDOS
    • Kali Linux / Parrot
    • SQL Injection
    • Virus-Trojan-Rat
  • Thủ thuật
    • Khóa Học Miễn Phí
    • Code
    • Mẹo Vặt Máy Tính
    • Facebook
    • Windows 7/8/10
    • Đồ Họa
    • Video
  • Software
    • Phần mềm máy tính
    • Phần mềm điện thoại
  • MMO
    • Advertisers – Publishers
    • Affiliate Program
    • Kiếm tiền bằng điện thoại
    • Pay Per Click – PPC
  • Tin tức
  • Kiến thức
No Result
View All Result
  • Network
    • Mạng cơ bản
    • Hyper-V
    • Linux
    • Windown Server 2012
  • Security
    • Basic Hacking
    • Deface
    • DDOS
    • Kali Linux / Parrot
    • SQL Injection
    • Virus-Trojan-Rat
  • Thủ thuật
    • Khóa Học Miễn Phí
    • Code
    • Mẹo Vặt Máy Tính
    • Facebook
    • Windows 7/8/10
    • Đồ Họa
    • Video
  • Software
    • Phần mềm máy tính
    • Phần mềm điện thoại
  • MMO
    • Advertisers – Publishers
    • Affiliate Program
    • Kiếm tiền bằng điện thoại
    • Pay Per Click – PPC
  • Tin tức
  • Kiến thức
No Result
View All Result
AnonyViet
No Result
View All Result

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

AnonyViet by AnonyViet
31/08/2018 - Updated on 12/07/2019
in Code
4

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 bộ Code HTML Ma trận cực đẹp viết bằng Canvas 4

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>

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.

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

cach tao website onion dark web deep web

Cách tạo Website trên Dark Web và Deep Web

20/12/2020 - Updated on 21/12/2020
extension hay cho Visual Studio Code

24 Extension Visual Studio Code tốt nhất nên sử dụng khi lập trình

11/11/2020
Xoá các File trùng lặp bằng Python

Viết chương trình Xoá các File trùng lặp bằng Python

22/10/2020
viet ung dung chat bang python

Cách viết ứng dụng chat đơn giản bằng Python

15/10/2020 - Updated on 16/10/2020
Tags: codehtmlhtml ma trậnhtml matrixma trậnmatrix
Previous Post

Tiết kiệm PIN tối đa cho máy Android với Hibernation Manager

Next Post

Share TUT đổi tên Facebook không giới hạn mới nhất

AnonyViet

AnonyViet

Kiến thức như một ngọn lửa, càng chia sẽ nó sẽ càng bùng cháy!

Related Posts

môi trường ảo python windows
Code

Cách thiết lập môi trường ảo Python trên Windows 10

17/01/2021
Các kiểu dữ liệu cơ bản trong Python 5
Code

Các kiểu dữ liệu cơ bản trong Python

12/01/2021
Top 5 Ngôn Ngữ Lập Trình Hacker Mũ Trắng Nên Học
Code

Top 5 Ngôn Ngữ Lập Trình Hacker Mũ Trắng Nên Học

27/11/2020 - Updated on 30/11/2020
Xoá các File trùng lặp bằng Python
Code

Viết chương trình Xoá các File trùng lặp bằng Python

22/10/2020
viet ung dung chat bang python
Code

Cách viết ứng dụng chat đơn giản bằng Python

15/10/2020 - Updated on 16/10/2020
ứng dụng tra số điện thoại thuộc Quốc gia nào
Code

Viết ứng dụng tra số điện thoại thuộc Quốc gia nào bằng Python

11/10/2020 - Updated on 13/10/2020
Next Post
Share TUT đổi tên Facebook không giới hạn mới nhất 6

Share TUT đổi tên Facebook không giới hạn mới nhất

guest
guest

Website này sử dụng Akismet để hạn chế spam. Tìm hiểu bình luận của bạn được duyệt như thế nào.

4 Comments
oldest
newest most voted
Inline Feedbacks
View all comments
Khang KTN | <span class="wpdiscuz-comment-count">4 comments</span>
Khang KTN | 4 comments
2 years ago

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.

0
Reply
AnonyViet | <span class="wpdiscuz-comment-count">1528 comments</span>
Author
AnonyViet | 1528 comments
2 years ago
Reply to  Khang KTN

https://www.facebook.com/anonyvietdotcom/
https://www.facebook.com/groups/anonyviet/
bạn tham gia ở đây

0
Reply
VNU | <span class="wpdiscuz-comment-count">1 comments</span>
VNU | 1 comments
2 years ago

Đẹp vậy ad ơi, e rất thíc

0
Reply
AnonyViet | <span class="wpdiscuz-comment-count">1528 comments</span>
Author
AnonyViet | 1528 comments
2 years ago
Reply to  VNU

cảm ơn bạn, mình sẽ chia sẻ nhiều hơn

0
Reply

Liên hệ Quảng Cáo

Lien he AnonyViet

Đối tác

Fshare

Các bài mới

Tự động gửi tin nhắn hàng loạt trên Facebook Messenger 2021 7

Tự động gửi tin nhắn hàng loạt trên Facebook Messenger 2021

20/01/2021
duong dan khien windows bi loi (1)

Xuất hiện đường dẫn khiến Windows 10 bị treo ngay lập tức

19/01/2021
thay nhot honda mien phi

Hướng dẫn thay và nhận bình nhớt Honda miễn phí

19/01/2021
Cách Hack Password Windows đã lưu bằng Mimikatz và DAPA 8

Cách Hack Password Windows đã lưu bằng Mimikatz và DAPA

19/01/2021
Thư mục Home sẽ chuyển sang chế độ Private trong Ubuntu 21.04? 9

Thư mục Home sẽ chuyển sang chế độ Private trong Ubuntu 21.04?

19/01/2021

Ads

Giới thiệu

AnonyViet

AnonyViet

Nơi chia sẻ những kiến thức mà bạn chưa từng được học trên ghế nhà trường!

Chúng tôi sẵn sàng đón những ý kiến đóng góp, cũng như bài viết của các bạn gửi đến AnonyViet.

Hãy cùng AnonyViet xây dựng một cộng đồng CNTT lớn mạnh nhất!

Giới thiệu

AnonyViet là Website chia sẻ miễn phí tất cả các kiến thức về công nghệ thông tin. AnonyViet cung cấp mọi giải pháp về mạng máy tính, phần mềm, đồ họa và MMO.

Liên kết

Game B52 |  Tải game đổi thưởng online | Chơi game bài hot 2020 | Chơi game bài đổi thưởng online | Gam Víp | 88vin link

Liên hệ đặt Ads: [email protected]

Liên hệ

Email: anonyviet.com[@]gmail.com

1409 Hill Street #01-01A
Old Hill Street Police Station
Singapore 179369

Bài viết mới

  • Tự động gửi tin nhắn hàng loạt trên Facebook Messenger 2021
  • Xuất hiện đường dẫn khiến Windows 10 bị treo ngay lập tức
  • Hướng dẫn thay và nhận bình nhớt Honda miễn phí
  • Cách Hack Password Windows đã lưu bằng Mimikatz và DAPA
  • Thư mục Home sẽ chuyển sang chế độ Private trong Ubuntu 21.04?
  • Đây là lệnh trên Windows 10 khiến ổ cứng bị hỏng
  • Giới thiệu về AnonyViet
  • Liên hệ Quảng cáo
  • Privacy & Policy
  • Contact

© 2019 AnonyViet - Chúng tôi mang đến cho bạn những kiến thức bổ ích về Công nghệ.

No Result
View All Result
  • Network
    • Mạng cơ bản
    • Hyper-V
    • Linux
    • Windown Server 2012
  • Security
    • Basic Hacking
    • Deface
    • DDOS
    • Kali Linux / Parrot
    • SQL Injection
    • Virus-Trojan-Rat
  • Thủ thuật
    • Khóa Học Miễn Phí
    • Code
    • Mẹo Vặt Máy Tính
    • Facebook
    • Windows 7/8/10
    • Đồ Họa
    • Video
  • Software
    • Phần mềm máy tính
    • Phần mềm điện thoại
  • MMO
    • Advertisers – Publishers
    • Affiliate Program
    • Kiếm tiền bằng điện thoại
    • Pay Per Click – PPC
  • Tin tức
  • Kiến thức

© 2019 AnonyViet - Chúng tôi mang đến cho bạn những kiến thức bổ ích về Công nghệ.

wpDiscuz