Canvas trong HTML
Miêu tả
Thẻ <canvas> trong HTML5 được sử dụng để vẻ đồ họa một cách nhanh gọn thông qua một ngôn ngữ nào đó (thông thường là JavaScript).
Tuy nhiên, thẻ <canvas> bản thân nó không có khả năng tự vẽ mà nó chỉ là phần bao ngoài cho đồ họa – bạn cần phải sử dụng một ngôn ngữ để vẽ đồ ...
Miêu tả
Thẻ <canvas> trong HTML5 được sử dụng để vẻ đồ họa một cách nhanh gọn thông qua một ngôn ngữ nào đó (thông thường là JavaScript).
Tuy nhiên, thẻ <canvas> bản thân nó không có khả năng tự vẽ mà nó chỉ là phần bao ngoài cho đồ họa – bạn cần phải sử dụng một ngôn ngữ để vẽ đồ họa bên trong.
Phương thức getContext() sẽ trả về một đối tượng (object) cung cấp các phương thức và thuộc tính để vẽ trên thẻ canvas.
Thư viện canvas này sẽ bao gồm các thuộc tính và phương thức của đối tượng getContext(“2d”), được sử dụng để vẽ chữ, đường kẻ, hình hộp, hình tròn, … trên thẻ canvas.
Trình duyệt hỗ trợ
Số trong bảng dưới đây thể hiện phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ cho thuộc tính.
| Thuộc tính |
 |
 |
 |
 |
 |
|---|
| Canvas |
Có |
Có |
9.0 |
Có |
Có |
Màu sắc, kiểu trang trí và đổ bóng
Một số thuật ngữ :
gradient : Dải màu
pattern : Mẫu họa tiết
| Thuộc tính | Miêu tả |
|---|
| fillStyle | Thiết lập hoặc trả về màu, dải màu hoặc mẫu họa tiết sử dụng để đổ lên hình |
| strokeStyle | Thiết lập hoặc trả về màu, dải màu hoặc mẫu họa tiết sử dụng cho đường viền |
| shadowColor | Thiết lập hoặc trả về màu sử dụng cho đổ bóng |
| shadowBlur | Thiết lập hoặc trả về độ mờ của bóng |
| shadowOffsetX | Thiết lập hoặc trả về khoảng cách chiều ngang từ bóng đến hình |
| shadowOffsetY | Thiết lập hoặc trả về khoảng cách chiều dọc từ bóng đến hình |
| Phương thức | Miêu tả |
|---|
| createLinearGradient() | Tạo dải màu dạng đường thẳng (để sử dụng trong nội dung canvas) |
| createPattern() | Lặp thẻ theo một hướng nhất định để tạo mẫu họa tiết |
| createRadialGradient() | Tạo một dải màu dạng tròn (để sử dụng trong nội dung canvas) |
| addColorStop() | Thêm màu sắc và điểm dừng trong một dải màu |
Kiểu đường kẻ
| Thuộc tính | Miêu tả |
|---|
| lineCap | Thiết lập hoặc trả về kiểu mũ cho 2 đầu dòng kẻ |
| lineJoin | Thiết lập hoặc trả về kiểu của góc tạo bởi 2 dòng kẻ |
| lineWidth | Thiết lập hoặc trả về chiều rộng của dòng kẻ |
| miterLimit | Thiết lập hoặc trả về chiều dài tối đa của mũ (với lineJoin = miter) tạo bởi 2 dòng kẻ |
Hình chữ nhật
| Phương thức | Miêu tả |
|---|
| rect() | Tạo một hình chữ nhật |
| fillRect() | Vẽ hình chữ nhật được đổ màu (mặc định là đen) |
| strokeRect() | Vẽ hình chữ nhật (không đổ màu) |
| clearRect() | Xóa các điểm ảnh trong khu vực hình chữ nhật |
Vẽ nhiều nét
| Phương thức | Miêu tả |
|---|
| fill() | Đổ màu cho hình vẽ hiện tại (path) |
| stroke() | Hiển thị các đường vẽ của bạn |
| beginPath() | Bắt đầu đường vẽ hoặc thiết lập lại đường vẽ hiện tại |
| moveTo() | Di chuyển tới một điểm trong thẻ canvas để bắt đầu nét vẽ (không tạo ra đường kẻ) |
| closePath() | Đóng nét vẽ từ điểm hiện tại và di chuyển về điểm bắt đầu |
| lineTo() | Thêm một điểm và tạo một đường kẻ từ điểm đó đến điểm hiện tại trong canvas |
| clip() | Cắt một khu vực theo bất kỳ hình dạng và kích thước nào từ canvas nguyên bản |
| quadraticCurveTo() | Tạo một đường cong Bézier bậc 2 |
| bezierCurveTo() | Tạo một đường cong Bézier bậc 3 |
| arc() | Tạo một vòng cung / đường tròn (được sử dụng để tạo ra các đường tròn hoặc một phần đường tròn) |
| arcTo() | Tạo một vòng cung / đường tròn giữa hai tiếp tuyến |
| isPointInPath() | Trả về true nếu 1 điểm nằm trong hình, ngược lại sẽ trả về false |
Thay đổi ảnh
| Phương thức | Miêu tả |
|---|
| scale() | Kéo hình hiện tại to hơn hoặc nhỏ hơn trên canvas |
| rotate() | Quay hình hiện tại trên canvas |
| translate() | Di chuyển vị trí điểm (0,0) trên canvas |
| transform() | Thay thế ma trận biến đổi hiện tại của hình vẽ trên canvas |
| setTransform() | Thiết lập lại ma trận biến đổi sau đó chạy transform() |
Chữ
| Thuộc tính | Miêu tả |
|---|
| font | Thiết lập hoặc trả về các thuộc tính font hiện tại của nội dung |
| textAlign | Thiết lập hoặc trả về vị trí căn lề hiện tại của nội dung |
| textBaseline | Thiết lập hoặc trả về đường cơ sở hiện tại của chữ |
| Phương thức | Miêu tả |
|---|
| fillText() | Vẽ chữ đã được đổ màu trong canvas |
| strokeText() | Vẽ chữ trong canvas (không đổ màu) |
| measureText() | Trả về một đối tượng chứa chiều dài của chữ |
Vẽ ảnh
| Phương thức | Miêu tả |
|---|
| drawImage() | Vẽ ảnh, tranh hoặc video trong canvas |
Thao tác với điểm ảnh
| Thuộc tính | Miêu tả |
|---|
| awidth | Trả về chiều dài của ImageData |
| height | Trả về chiều cao của ImageData |
| data | Trả về một đối tượng chứa dữ liệu ảnh của ImageData |
| Phương thức | Miêu tả |
|---|
| createImageData() | Tạo một ImageData rỗng |
| getImageData() | Trả về đối tượng ImageData chứa dữ liệu điểm ảnh đã được sao chép trong hình chữ nhật chỉ định |
| putImageData() | Chèn dữ liệu ảnh (lấy từ ImageData) vào canvas |
Kết hợp
| Thuộc tính | Miêu tả |
|---|
| globalAlpha | Thiết lập hoặc trả về giá trị alpha hay transparency hiện tại |
| globalCompositeOperation | Thiết lập hoặc trả về cách một ảnh mới được vẽ lên một ảnh đã có sẵn |
Phương thức khác
| Phương thức | Miêu tả |
|---|
| save() | Lưu trạng thái hiện tại |
| restore() | Khôi phục trạng thái đường vẽ và các thuộc tính đã được lưu trước đó |
| createEvent() | |
| getContext() | |
| toDataURL() | |
