HTML5 08 – Canvas trong HTML5

0
60

Bài số 8 trong series học HTML5, chúng ta sẽ đi tìm hiểu về 1 phần tử mới đó là Canvas. Đây là 1 thẻ mới ở trong HTML5, giúp vẽ các đối tượng đồ họa như đường thẳng, hình chữ nhật, vẽ chữ, …

canvas trong html5

Canvas là gì?

Canvas là thẻ mới trong HTML5 được dùng để vẽ đồ họa trong một trang web, thông qua JavaScript. Phần tử canvas là vùng chứa duy nhất cho các đồ họa. Canvas chứa một vài phương thức để vẽ đường thẳng, hình hộp, đường tròn, văn bản và thêm hình ảnh.

Canvas chiếm một khu vực hình chữ nhật trên trang web mà kích thước của hình chữ nhật được quy định bởi nó.

Lưu ý: Mặc định thẻ canvas sẽ không có đường viền và nội dung rỗng.

Phần tử <canvas> có cú pháp dạng:

Các thuộc tính và kích thước thường được xác định ngay bên trong thẻ canvas. Bạn có thể có nhiều thẻ <canvas> trên một trang HTML. Mặc định, thẻ canvas chỉ có 2 phần tử: width và height. Nếu không được chỉ ra kích thước, thì kích thước mặc định là 300px chiều rộng và 150px chiều cao.

Phần tử <canvas> chỉ có chức năng chứa các đối tượng đồ họa. Bạn bắt buộc phải sử dụng Javascript để vẽ.

Mỗi phần tử <canvas> tạo ra bạn cần gán id cho nó để JavaScript truy cập đến. Để thực hiện vẽ trong <canvas> trước tiên cần lấy đối tượng bao bọc các lệnh vẽ và thuộc tính của canvas đó, đối tượng này gọi là context.

Ví dụ: Tạo ra 1 canvas và sử dụng JS để lấy context

Tại sao lại dùng Canvas

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.

Sự khác nhau giữa HTML4 và HTML5

  • HTML4 không hỗ trợ
  • HTML5 hỗ trợ. Đây là tag mới trong HTML5.

Hỗ trợ trình duyệt

Hầu hết các trình duyệt hiện nay đều hỗ trợ đầy đủ phần tử canvas như Chrome, Edge, Firefox, Safari và Opera, ngoại trừ IE8 trở xuống.

Tọa độ trong canvas

Canvas sử dụng lưới tọa độ 2 chiều, với góc trái phía trên là tọa độ gốc (0,0)

X : tọa độ theo phương ngang, tăng từ trái sang phải
Y : tọa độ theo phương đứng, tăng từ trên xuống dưới

tọa độ canvas

Một số lệnh về canvas

Sử dụng Canvas không khó nhưng bạn cần có 1 ít kiến thức về HTML và Javascript. Một số trình duyệt cũ không hỗ trợ canvas, bạn nên sử dụng Firefox 1.5 trở về sau, Opera 9 hoặc phiên bản mới hơn.

Các thao tác thiết lập và vẽ trong canvas được thực hiện thông qua đối tượng context lấy được của canvas.

Các hình ảnh có thể vẽ trong Canvas là:

  • fillRect: Tô vẽ hình chữ nhật
  • Vẽ đường thẳng với lệnh moveTo và lineTo
  • Vẽ cung tròn – hình tròn với arc
  • Vẽ chữ trong canvas – font, fillText, strokeText
  • Vẽ hình với màu biến đổi tuyến tính (Linear Gradient)
  • Vẽ hình với màu biến đổi từ tâm (Radial Gradient)
  • Chèn ảnh

Vẽ hình chữ nhật trong Canvas

Hàm fillRect(x, y, w, h) tô một hình chữ nhật rộng w cao h với tọa độ góc trái – trên là (x, y). Nó sử dụng màu tô mặc định là màu đen.

Ví dụ:

Để thay đổi màu tô, mẫu tô sử dụng thuộc tính fillStyle của context để thiết lập trước khi vẽ.

Ví dụ đổi màu tô với fillStyle

Kết luận

Với việc sử dụng thư viện canvas, ta đã có thêm một tùy chọn nữa trong việc vẽ đồ thị, hình động hoặc cao hơn là viết các game nhỏ. Cám ơn các bạn đã đọc bài viết của tôi và mong rằng chúng ta sẽ có những trao đổi hữu ích thông qua bài viết này.

Chúc các bạn học tập tốt!

BÌNH LUẬN

Vui lòng nhập bình luận của bạn
Vui lòng nhập tên của bạn ở đây