Ví dụ và cách sử dụng chi tiết các thuộc tính, phương thức để vẽ hình trong thẻ canvas.

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ẽ đồ 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 Icon Chrome Icon FireFox Icon IE Icon Safari Icon Opera
Canvas 9.0

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ínhMiêu tả
fillStyleThiế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
strokeStyleThiế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
shadowColorThiết lập hoặc trả về màu sử dụng cho đổ bóng
shadowBlurThiết lập hoặc trả về độ mờ của bóng
shadowOffsetXThiết lập hoặc trả về khoảng cách chiều ngang từ bóng đến hình
shadowOffsetYThiết lập hoặc trả về khoảng cách chiều dọc từ bóng đến hình
Phương thứcMiê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ínhMiêu tả
lineCapThiết lập hoặc trả về kiểu mũ cho 2 đầu dòng kẻ
lineJoinThiết lập hoặc trả về kiểu của góc tạo bởi 2 dòng kẻ
lineWidthThiết lập hoặc trả về chiều rộng của dòng kẻ
miterLimitThiế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ứcMiê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ứcMiê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ứcMiê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ínhMiêu tả
fontThiết lập hoặc trả về các thuộc tính font hiện tại của nội dung
textAlignThiết lập hoặc trả về vị trí căn lề hiện tại của nội dung
textBaselineThiết lập hoặc trả về đường cơ sở hiện tại của chữ
Phương thứcMiê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ứcMiêu tả
drawImage()Vẽ ảnh, tranh hoặc video trong canvas

Thao tác với điểm ảnh

Thuộc tínhMiêu tả
widthTrả về chiều dài của ImageData
heightTrả về chiều cao của ImageData
dataTrả về một đối tượng chứa dữ liệu ảnh của ImageData
Phương thứcMiê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ínhMiêu tả
globalAlphaThiết lập hoặc trả về giá trị alpha hay transparency hiện tại
globalCompositeOperationThiế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ứcMiê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() 

About admin

Leave a Reply

Your email address will not be published. Required fields are marked *

*