HTML5: Cách sử dụng CANVAS


Khóa học qua video:
Lập trình Python All Lập trình C# All SQL Server All Lập trình C Java PHP HTML5-CSS3-JavaScript
Đăng ký Hội viên
Tất cả các video dành cho hội viên

<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
Khóa học qua video:
Lập trình Python All Lập trình C# All SQL Server All Lập trình C Java PHP HTML5-CSS3-JavaScript
Đăng ký Hội viên
Tất cả các video dành cho hội viên
Copied !!!