Đối tượng HTML DOM Canvas liên kết với phần tử <canvas> được giới thiệu trong HTML5. Thẻ <canvas> được dùng để vẽ đồ họa với sự trợ giúp của JavaScript. Canvas đóng vai trò như một vùng chứa cho đồ họa. Trên canvas, chúng ta có thể vẽ đường thẳng, hình dạng, v.v.
Thuộc tính
Sau đây là các thuộc tính cho Đối tượng Canvas:
| Thuộc tính | Mô tả |
|---|---|
| fillStyle | Để thiết lập hoặc trả về màu, gradient hoặc mẫu được dùng để tô màu cho bản vẽ. |
| strokeStyle | Để thiết lập hoặc trả về màu, gradient hoặc mẫu được dùng cho nét vẽ. |
| shadowColor | Để thiết lập hoặc trả về màu được dùng cho bóng. |
| shadowBlur | Để thiết lập hoặc trả về mức độ mờ của bóng. |
| shadowOffsetX | Để thiết lập hoặc trả về khoảng cách ngang của bóng từ hình dạng. |
| shadowOffsetY | Để thiết lập hoặc trả về khoảng cách dọc của bóng từ hình dạng. |
Phương thức
Sau đây là các phương thức của đối tượng Canvas:
| Phương thức | Mô tả |
|---|---|
| createLinearGradient() | Để tạo gradient tuyến tính. |
| createPattern() | Để tạo mẫu bằng cách lặp lại một phần tử được chỉ định theo một hướng. |
| createRadialGradient() | Để tạo gradient tròn (radial). |
| addColorStop() | Để thêm điểm dừng màu cho gradient. |
Cú pháp
Cú pháp sau đây dùng cho:
Tạo đối tượng canvas:
var x = document.createElement("CANVAS");Ví dụ
Hãy xem một ví dụ về đối tượng HTML DOM canvas:
<!DOCTYPE html> <html> <head> <style> canvas { border: 1px double blue; margin:1em; } </style> </head> <body> <h1>CANVAS</h1> <button onclick="createCanvas()">TẠO</button> <p>Nhấn nút trên để tạo một phần tử CANVAS với một hình tròn màu xanh lá trong đó</p> <script> function createCanvas() { var x = document.createElement("CANVAS"); var ctx = x.getContext("2d"); ctx.fillStyle = "#C7EA46"; ctx.beginPath(); ctx.arc(100, 75, 50, 0, 2 * Math.PI); ctx.fill(); ctx.stroke(); document.body.appendChild(x); } </script> </body> </html>Kết quả
Điều này sẽ tạo ra kết quả sau:
Khi nhấn TẠO:
Trong ví dụ trên:
Chúng ta đã tạo nút TẠO, khi được nhấp sẽ thực thi phương thức createCanvas().
<button onclick="createCanvas()">TẠO</button>
Phương thức createCanvas() tạo một phần tử <canvas>. Chúng ta sau đó lấy ngữ cảnh cho phần tử <canvas> mới được tạo bằng phương thức getContext(). Mỗi canvas chỉ có thể có một ngữ cảnh liên kết với nó. Giá trị tham số "2d" bên trong phương thức getContext() chỉ định rằng nó sẽ được dùng để vẽ hình dạng, kích thước, tức là chỉ vẽ đồ họa 2d. Chúng ta sau đó đặt màu tô bằng fillStyle và sử dụng phương thức beginPath() để bắt đầu đường dẫn.
Sau đó, sử dụng phương thức arc() để xác định tọa độ hình tròn và tô màu cho hình tròn đó với màu fillStyle. Cuối cùng, chúng ta sử dụng phương thức stroke() để thực sự vẽ trên canvas và nối canvas làm con của phần tử body bằng phương thức appendChild() của document.body:
function createCanvas() { var x = document.createElement("CANVAS"); var ctx = x.getContext("2d"); ctx.fillStyle = "#C7EA46"; ctx.beginPath(); ctx.arc(100, 75, 50, 0, 2 * Math.PI); ctx.fill(); ctx.stroke(); document.body.appendChild(x); }