Tham chiếu Canvas trong HTML

Hà Nguyễn

Thẻ HTML <canvas> được sử dụng để vẽ đồ họa một cách nhanh chóng, thông qua script (thường là JavaScript).

Để tìm hiểu thêm về <canvas>, vui lòng đọc hướng dẫn HTML Canvas của Quantrimang.com.

Màu sắc, kiểu và bóng đổ

Thuộc tính	Mô tả
fillStyle	Thiết lập/trả về màu sắc, gradient hoặc pattern được sử dụng để tô bản vẽ
strokeStyle	Thiết lập/trả về màu sắc, gradient hoặc pattern được sử dụng cho các nét vẽ
shadowColor	Thiết lập/trả về màu để sử dụng cho bóng đổ
shadowBlur	Thiết lập/trả về mức độ mờ cho bóng đổ
shadowOffsetX	Thiết lập/trả về khoảng cách ngang của bóng từ hình dạng
shadowOffsetY	Thiết lập/trả về khoảng cách theo chiều dọc của bóng từ hình dạng

Phương thức	Mô tả
createLinearGradient()	Tạo một gradient tuyến tính (để sử dụng trên nội dung canvas)
createPattern()	Lặp lại một phần tử được chỉ định theo hướng đã chỉ định
createRadialGradient()	Tạo một gradient xuyên tâm/tròn (để sử dụng trên nội dung canvas)
addColorStop()	Chỉ định màu sắc và vị trí dừng trong một đối tượng gradient

Kiểu đường kẻ

Thuộc tính	Mô tả
lineCap	Thiết lập/trả về kiểu của các chữ hoa đầu dòng cho một dòng
lineJoin	Thiết lập/trả về loại góc được tạo, khi hai dòng gặp nhau
lineWidth	Thiết lập/trả về độ rộng dòng hiện tại
miterLimit	Thiết lập/trả về chiều dài miter tối đa

Hình chữ nhật

Phương thức	Mô tả
rect()	Tạo một hình chữ nhật
fillRect()	Vẽ một hình chữ nhật "có đổ màu"
strokeRect()	Vẽ một hình chữ nhật (không đổ màu)
clearRect()	Xóa các pixel được chỉ định trong một hình chữ nhật nhất định

Đường chuẩn

Phương thức	Mô tả
fill()	Điền vào bản vẽ hiện tại (đường chuẩn)
stroke()	Vẽ đường chuẩn bạn đã xác định trên thực tế
beginPath()	Bắt đầu một đường chuẩn hoặc reset lại đường chuẩn hiện tại
moveTo()	Di chuyển đường chuẩn đến điểm được chỉ định trong canvas mà không cần tạo đường
closePath()	Tạo một đường chuẩn từ điểm hiện tại trở lại điểm bắt đầu
lineTo()	Thêm một điểm mới và tạo một đường thẳng đến điểm đó từ điểm được chỉ định cuối cùng trong canvas
clip()	Cắt một vùng có hình dạng và kích thước bất kỳ từ canvas gốc
quadraticCurveTo()	Tạo đường cong Bézier bậc hai
bezierCurveTo()	Tạo đường cong Bézier hình khối
arc()	Tạo một cung/đường cong (được sử dụng để tạo vòng tròn hoặc các phần của vòng tròn)
arcTo()	Tạo một cung/đường cong giữa hai tiếp tuyến
isPointInPath()	Trả về true nếu điểm được chỉ định nằm trong đường chuẩn hiện tại, nếu không trả về false

Biến đổi

Phương thức	Mô tả
scale()	Chia tỷ lệ bản vẽ hiện tại lớn hoặc nhỏ hơn
rotate()	Xoay bản vẽ hiện tại
translate()	Sửa lại vị trí (0,0) trên canvas
transform()	Thay thế ma trận chuyển đổi hiện tại cho bản vẽ
setTransform()	Reset biến đổi hiện tại thành ma trận nhận dạng. Sau đó chạy transform()

Văn bản

Thuộc tính	Mô tả
font	Thiết lập/trả về các thuộc tính phông chữ hiện tại cho nội dung văn bản
textAlign	Thiết lập/trả về căn chỉnh hiện tại cho nội dung văn bản
textBaseline	Thiết lập/trả về đường cơ sở văn bản hiện tại được sử dụng khi vẽ chữ

Phương thức	Mô tả
fillText()	Vẽ chữ "có đổ màu" trên canvas
strokeText()	Vẽ văn bản trên canvas (không đổ màu)
measureText()	Trả về một đối tượng có chứa chiều rộng của văn bản được chỉ định

Vẽ hình ảnh

Phương thức	Mô tả
drawImage()	Vẽ hình ảnh, canvas hoặc video lên canvas

Thao tác pixel

Thuộc tính	Mô tả
width	Trả về chiều rộng của đối tượng ImageData
height	Trả về chiều cao của đối tượng ImageData
data	Trả về một đối tượng có chứa dữ liệu hình ảnh của đối tượng ImageData được chỉ định

Phương thức	Mô tả
createImageData()	Tạo một đối tượng ImageData mới, trống
getImageData()	Trả về một đối tượng ImageData sao chép dữ liệu pixel cho hình chữ nhật được chỉ định trên canvas
putImageData()	Đặt dữ liệu hình ảnh (từ một đối tượng ImageData được chỉ định) trở lại canvas

Compositing

Thuộc tính	Mô tả
globalAlpha	Thiết lập/trả về giá trị alpha hoặc độ trong suốt hiện tại của bản vẽ
globalCompositeOperation	Thiết lập/trả về cách một hình ảnh mới được vẽ trên một hình ảnh hiện có

Khác

Phương thức	Mô tả
save()	Lưu trạng thái của ngữ cảnh hiện tại
restore()	Trả về trạng thái và thuộc tính của đường chuẩn đã lưu trước đó
createEvent()
getContext()
toDataURL()

Thứ Ba, 10/05/2022 09:39

5 ★ 21 👨 591

#Canvas

Bạn nên đọc

Xác thực tài khoản!

Theo Nghị định 147/2024/ND-CP, bạn cần xác thực tài khoản trước khi sử dụng tính năng này. Chúng tôi sẽ gửi mã xác thực qua SMS hoặc Zalo tới số điện thoại mà bạn nhập dưới đây:

Số điện thoại chưa đúng định dạng!