Code tạo Pháo Hoa dùng HTML 5 và Javascript

Hôm nay mình sẽ đem đến cho các bạn thêm một ít kiến thức về sử dụng HTML5Javascript . Hôm nay mình sẽ hướng dẫn cho các bạn cách làm hiệu ứng bắn pháo hoa rất đẹp mắt để trang trí Website cho bạn vào ngày tết, đặc biệt khi click chuột sẽ có hiệu ứng đi kèm. Qua bài viết này, hi vọng các bạn sẽ nắm thêm 1 phần kiến thức về HTML5 Canvas.

Bạn có thể xem trước bản Demo tại đây

     Các bạn tạo ra 3 file: index.html, style.cssscript.js theo nội dung bên dưới, lưu vào cùng thư mục. Hoặc đơn giản tải file này xuống đã có sẵn code.

canvas-fireworks-tutorial

Bước 1: Tạo 1 file index.html với nội dung

Bước 2: Tạo 1 file CSS đặt tên là style.css với  nội dung:

Bước 3: Tạo file script.js với nội dung (Đây là file quan trọng tạo ra pháo hoa)

Các đoạn script trên, đều có chú thích từng bước cụ thể ở từng phần, nếu bạn muốn chỉnh sửa thêm bơt code có thể đọc chú thích để tham khảo. Điều quan trọng là đoạn script này các bạn phải đặt bên dưới thẻ <body> nhé

 

 

 

Để lại bình luận

12 Bình luận on "Code tạo Pháo Hoa dùng HTML 5 và Javascript"

avatar
Sort by:   newest | oldest
Danh | <span class="wpdiscuz-comment-count">2 comments</span>
Danh | 2 comments

làm sao mới có được ad. em up lên host rồi mà sao có thấy gì đâu :((

Blacknet | <span class="wpdiscuz-comment-count">290 comments</span>
Blacknet | 290 comments

Hay lắm ad

Lâm Trung Tính | <span class="wpdiscuz-comment-count">951 comments</span>

Chắc đến năm 2018 mới dùng rồi :(((

Lâm Trung Tính | <span class="wpdiscuz-comment-count">951 comments</span>

Hẹn gặp lại code này bài này lần nữa..Thanks Ad nhiều nha

Cường | <span class="wpdiscuz-comment-count">6 comments</span>
Cường | 6 comments

thank ad nhieeuflawm năm sau chắc sẽ dùng

Tuấn Anh | <span class="wpdiscuz-comment-count">92 comments</span>
Tuấn Anh | 92 comments

share code bá đạo thật
cái này chắc cũng có dùng trong game tạo hiệu ứng đạn bay

Tuấn Anh | <span class="wpdiscuz-comment-count">92 comments</span>
Tuấn Anh | 92 comments

sao em làm ko đc

long | <span class="wpdiscuz-comment-count">3 comments</span>
long | 3 comments

cái này làm sao để đưa vô blog đc ạ <3

NguyenHaSon-2006 | <span class="wpdiscuz-comment-count">179 comments</span>

thanks ad, thanks ad và thanks ad

wpDiscuz