Tạo hiệu ứng đốm lửa bằng HTML5 Canvas và Javascript




Tuần trước mình đã giới thiệu tới các bạn bài viếtTạo biểu đồ Gauge bằng HTML5 Canvas và Javascriptđể làm quen với cách sử dụng HTML5 Canvas. Và trong tuần này, mình sẽ tiếp tục mang đến cho các bạn thêm hiệu ứng đốm lửa cực cool. Qua bài viết này, các bạn sẽ có thêm kinh nghiệm trong việc sử dụng canvas và đặc biệt là có thể ứng dụng ngay hiệu ứng này cho những trang tổ chức sự kiện sinh nhật hay tiệc tùng.

tao-hieu-ung-dom-lua-bang-html5-canvas-va-javascript

Xem Demo | Download

HTML

Như thường lệ, chúng ta vẫn chỉ cần một phần tử canvas để tạo hiệu ứng.

CSS

Các bạn chỉ cần áp dụng định dạng đơn giản như sau:

* margin: 0; padding: 0; #canvas display: block; Javascript

Và đây là toàn bộ đoạn script sẽ giúp các bạn tạo hiệu ứng đốm lửa :

Mình hy vọng qua bài viết này, các bạn sẽ hiểu và có thể sáng tạo thêm nhiều hiệu ứng khác từ phần tử html5 canvas.

Share on Google Plus
    Blogger Comment
    Facebook Comment

0 nhận xét:

Đăng nhận xét