Học CNTT HTML

Tham chiếu Canvas trong HTML

Mục lục

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ínhMô tả
fillStyleThiết lập/trả về màu sắc, gradient hoặc pattern được sử dụng để tô bản vẽ
strokeStyleThiết lập/trả về màu sắc, gradient hoặc pattern được sử dụng cho các nét vẽ
shadowColorThiết lập/trả về màu để sử dụng cho bóng đổ
shadowBlurThiết lập/trả về mức độ mờ cho bóng đổ
shadowOffsetXThiết lập/trả về khoảng cách ngang của bóng từ hình dạng
shadowOffsetYThiế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ứcMô 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ínhMô tả
lineCapThiết lập/trả về kiểu của các chữ hoa đầu dòng cho một dòng
lineJoinThiết lập/trả về loại góc được tạo, khi hai dòng gặp nhau
lineWidthThiết lập/trả về độ rộng dòng hiện tại
miterLimitThiết lập/trả về chiều dài miter tối đa
Phương thứcMô 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ứcMô 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ứcMô 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ínhMô tả
fontThiế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
textAlignThiết lập/trả về căn chỉnh hiện tại cho nội dung văn bản
textBaselineThiế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ứcMô 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ứcMô tả
drawImage()Vẽ hình ảnh, canvas hoặc video lên canvas

Thao tác pixel

Thuộc tínhMô tả
widthTrả về chiều rộng của đối tượng ImageData
heightTrả về chiều cao của đối tượng ImageData
dataTrả 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ứcMô 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ínhMô tả
globalAlphaThiết lập/trả về giá trị alpha hoặc độ trong suốt hiện tại của bản vẽ
globalCompositeOperationThiế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ứcMô 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:38
5 ★ 21 👨 519
#Canvas

Bạn nên đọc

0 Bình luận
Sắp xếp theo
❖
Xóa Đăng nhập để Gửi

    Có thể bạn quan tâm

    ❖ HTML
    HTML