Sách tham khảo HTML Canvas

Sách tham khảo HTML Canvas

Thẻ <canvas> của HTML được sử dụng để vẽ đồ họa động thông qua kịch bản (thường là JavaScript).

Để biết thêm thông tin về <canvas>, hãy đọc hướng dẫn HTML Canvas của chúng tôi.

Màu sắc, kiểu dáng và bóng

Thuộc tính Mô tả
fillStyle Đặt hoặc trả về màu sắc, dần hoặc mẫu của lấp đầy
strokeStyle Đặt hoặc trả về màu sắc, dần hoặc mẫu của đường
shadowColor Đặt hoặc trả về màu sắc của bóng
shadowBlur Đặt hoặc trả về mức độ mờ của bóng
shadowOffsetX Đặt hoặc trả về khoảng cách ngang từ bóng đến hình dạng
shadowOffsetY Đặt hoặc trả về khoảng cách thẳng đứng từ bóng đến hình dạng
Phương pháp Mô tả
createLinearGradient() Tạo dần tuyến tính (dùng trên nội dung bức tranh)
createPattern() Lặp lại phần tử chỉ định theo hướng chỉ định
createRadialGradient() Tạo dần từ từ hoặc dần từ từ (dùng trên nội dung bức tranh)
addColorStop() Định nghĩa màu sắc và vị trí dừng của màu sắc trong đối tượng dần

Kiểu đường

Thuộc tính Mô tả
lineCap Đặt hoặc trả về kiểu điểm cuối của đường
lineJoin Đặt hoặc trả về loại góc được tạo khi hai đường相交
lineWidth Đặt hoặc trả về độ rộng của đường
miterLimit Đặt hoặc trả về độ dài lớn nhất của góc nối

Khung hình

Phương pháp Mô tả
rect() Tạo khung hình
fillRect() Vẽ khung hình được lấp đầy
strokeRect() Vẽ khung hình (không lấp đầy)
clearRect() Xóa bỏ các pixel chỉ định trong khung hình cho trước

Đường dẫn

Phương pháp Mô tả
fill() Lấp đầy bức vẽ hiện tại (đường dẫn)
stroke() Vẽ đường dẫn đã định nghĩa
beginPath() Bắt đầu một đường dẫn mới hoặc đặt lại đường dẫn hiện tại
moveTo() Chuyển động đường dẫn đến điểm chỉ định trên bức tranh, không tạo đường
closePath() Tạo một đường dẫ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, sau đó tạo đường thẳng từ điểm đó đến điểm cuối được chỉ định trên bức tranh
clip() Cắt một khu vực hình dạng và kích thước ngẫu nhiên từ bức tranh ban đầu
quadraticCurveTo() Tạo đường cong hai điểm Bezier
bezierCurveTo() Tạo đường cong ba điểm Bezier
arc() Tạo đoạn đường cong (để tạo hình tròn hoặc phần hình tròn)
arcTo() Tạo đoạn đường cong giữa hai đường thẳng
isPointInPath() Trả về true nếu điểm được chỉ định nằm trong đường dẫn hiện tại, ngược lại trả về false

Chuyển đổi

Phương pháp Mô tả
scale() Phóng to hoặc thu nhỏ vẽ hiện tại
rotate() Chuyển đổi vẽ hiện tại
translate() Chuyển đổi lại vị trí (0,0) trên canvas
transform() Thay thế ma trận变换 hiện tại của vẽ
setTransform() Đặt lại变换 thành ma trận đơn vị. Sau đó chạy transform()

Văn bản

Thuộc tính Mô tả
font Đặt hoặc trả về thuộc tính font hiện tại của văn bản
textAlign Đặt hoặc trả về cách đối齐 văn bản hiện tại
textBaseline Đặt hoặc trả về đường cơ bản hiện tại được sử dụng để vẽ văn bản
Phương pháp Mô tả
fillText() Vẽ văn bản
strokeText() Vẽ văn bản lên canvas (không lấp đầy)
measureText() Trả về đối tượng chứa chiều rộng của văn bản được chỉ định

Vẽ hình ảnh

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

Công 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 chứa dữ liệu hình ảnh của đối tượng ImageData được chỉ định
Phương pháp Mô tả
createImageData() Tạo đối tượng ImageData mới, trống
getImageData() Trả về đối tượng ImageData, đối tượng này chứa dữ liệu pixel của hình vuông được chỉ định trên canvas
putImageData() Đưa dữ liệu hình ảnh (từ đối tượng ImageData được chỉ định) trở lại canvas

Hợp thành

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

Khác

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