HTML5: Cách sử dụng CANVAS

Các khóa học qua video:
Python SQL Server PHP C# Lập trình C Java HTML5-CSS3-JavaScript
Học trên YouTube <76K/tháng. Đăng ký Hội viên
Viết nhanh hơn - Học tốt hơn
Giải phóng thời gian, khai phóng năng lực

<canvas> được dùng để vẽ đồ họa. Khả năng vẽ đồ họa của <canvas> thường thông qua các script (chủ yếu là sử dụng JavaScript).

<canvas> có một số phương thức đồ họa rất mạnh cho phép bạn vẽ được khá nhiều dạng hình học như box, circles, text, line, …, ngoài ra nó còn cho phép vẽ ảnh.

Trình duyệt hỗ trợ

Internet Explorer 9+, Firefox, Opera, Chrome và Safari đều hỗ trợ phần tử <canvas>.

Tạo vùng để vẽ

Phần tử <canvas> sẽ tạo ra một vùng có dạng chữ nhật trên trình duyệt, vùng này sẽ là nơi cho phép bạn có thể vẽ các dạng hình học như tôi đã trình bày ở trên. Mặc định <canvas> không tạo đường bao và không chứa nội dung. Một trang HTML có thể có nhiều phần tử <canvas>.

Đoạn mã dưới đây dùng để khởi tạo một canvas.

<canvas id="myCanvas" width="200" height="100"></canvas>

Nếu bạn muốn thiết lập đường bao cho <canvas> bạn có thể dùng thuộc tính border trong style như ví dụ dưới đây:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
  Trình duyệt này không hỗ trợ phần tử canvas.
</canvas>
</body>
</html>
 

Lưu ý: Nếu trình duyệt của bạn không hỗ trợ phần tử <canvas> thì dòng chữ nằm trong phần tử này sẽ hiện ra: "Trình duyệt này không hỗ trợ phần tử canvas."

 
» Tiếp: Vẽ chữ nhật trên <canvas>
« Trước: Thuộc tính mới của FORM & INPUT
Các khóa học qua video:
Python SQL Server PHP C# Lập trình C Java HTML5-CSS3-JavaScript
Học trên YouTube <76K/tháng. Đăng ký Hội viên
Viết nhanh hơn - Học tốt hơn
Giải phóng thời gian, khai phóng năng lực
Copied !!!