Thiết Kế Web

Cơ bản về Canvas trong HTML5

Thiết Kế Web – Trong loạt bài về HTML5 này Hiếu Đặng sẽ chủ yếu tập trong vào các phần quan trọng để các bạn có được một lượng kiến thức cơ bản về HTML5. Ở bài trước thì chúng …

Thiết Kế Web – Trong loạt bài về HTML5 này Hiếu Đặng sẽ chủ yếu tập trong vào các phần quan trọng để các bạn có được một lượng kiến thức cơ bản về HTML5. Ở bài trước thì chúng ta đã tìm hiểu Các thẻ tag mới trong HTML5 còn tiếp bài này chúng ta sẽ tìm hiểu sang Canvas trong HTML5.

Canvas là gì?

<canvas> là một phần tử mới xuất hiện trong HTML5 và rất hữu ích trong việc vẽ đồ họa trên nền web. Nó lần đầu được giới thiệu bởi Apple, sau đó được ứng dụng nhiều vào trong trình duyệt Safari và bây giờ các trình duyệt phổ biến cũng đã hỗ trợ . Để canvas chạy được với IE ta cần thêm ExplorerCanvas

Tag <canvas> trong HTML5 dùng để vẽ 2D trên trang web.

Vẽ một hình chữ nhật, hình chữ nhật gradient, hình chữ nhật nhiều màu và text nhiều màu trong canvas.

canvas

Trình duyệt hỗ trợ Canvas

iecrffopsf

E9, Firefox, Opera, Chrome và Safary đều hỗ trợ Canvas

Lưu ý: Như mình đã nói ở trên thì để canvas chạy được với IE ta cần thêm ExplorerCanvas

Tại sao chúng ta cần Canvas

Bởi vì Canvas có thể giúp hiển thị trực quan một số hình ảnh dễ dàng trên trình duyệt như:

  • Các sơ đồ đơn giản
  • Trang trí thêm cho giao diện người dùng
  • Hình ảnh động
  • Biểu đồ và đồ thị
  • Có thể nhúng các ứng dụng vẽ
  • Hoạt động tốt với những hạn chế của CSS

Tạo một Canvas

Một canvas là một vùng hình vuông trong trang HTML và được xác định bằng tag <canvas>.

Chú ý: Trạng thái mặc định của canvas là không đường viền và không nội dung.

Tag <canvas> sẽ có dạng:

Lưu ý: Luôn luôn xác định giá trị id (để JavaScript có thể tham chiếu tới) và width, height của canvas.

Để thêm border, bạn có thể dùng CSS.

Ví dụ:

Một vài ví dụ về ứng dụng của Canvas

Để vẽ một đường tròn trong Canvas, chúng ta dùng hàm sau.

Để thực sự vẽ một đường tròn, chúng ta cũng phải sử dụng các hàm “mực” như là stroke() hay fill() .

Tạo một đường tròn với hàm arc

canvas1

JavaScript

Như vậy, ở bài viết này mình chỉ giới thiệu cơ bản về Canvas trong HTML5. Còn rất nhiều ứng dụng hay của tag Canvas. Ở những bài sau mình sẽ giới thiệu đến các bạn tiếp. Chúc bác bạn thành công !

Thẻ:, , , , ,
comments powered by Disqus
Powered by HTH Company