
fillText() trong Canvas
Viết chữ "Xin chào!" and "Cười tươi nào!" (với dải màu) trên canvas, sử dụng fillText(): Trình duyệt của bạn không hỗ trợ thẻ canvas trong HTML5. Code: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 ...

setTransform() trong Canvas
Vẽ một hình chữ nhật, thiết lập lại và tạo mới một ma trận biến đổi với setTransform(), vẽ hình chữ nhật lại một lần nữa, thiết lập lại và tạo mới một ma trận biến đổi với setTransform(), sau đó lại vẽ lại hình chữ nhật. Lưu ý rằng mỗi khi bạn gọi setTransform(), nó sẽ thiết lập lại ma trận biến ...

measureText() trong Canvas
Kiểm tra độ dài của chữ trước khi viết trên Canvas: Trình duyệt của bạn không hỗ trợ thẻ canvas trong HTML5. Code: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 < ! DOCTYPE html > < ...

textAlign trong Canvas
Tạo một đường kẻ đỏ ở vị trí 150. Vị trí 150 sẽ là đường cơ sở cho tất cả các chữ ở ví dụ bên dưới. Hãy xem tác động của mỗi giá trị thuộc tính textAlign: Trình duyệt của bạn không hỗ trợ thẻ canvas trong HTML5. Code: 1 2 3 4 5 6 7 8 ...

drawImage() trong Canvas
Ảnh sử dụng: Vẽ ảnh trên Canvas: Trình duyệt của bạn không hỗ trợ thẻ canvas trong HTML5. Code: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 < ! DOCTYPE html > < html ...

strokeText() trong Canvas
Viết chữ "Hello world!" và "Big smile!" (với dải màu) trong Canvas, sử dụng strokeText(): Trình duyệt của bạn không hỗ trợ thẻ canvas trong HTML5. Code: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 ...

arcTo() trong Canvas
Tạo một vòng cung giữa 2 tiếp tuyến trên canvas Trình duyệt của bạn không hỗ trợ thẻ canvas trong HTML5. Code: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 < ! DOCTYPE html > < ...

textBaseline trong Canvas
Vẽ một đường thằng màu đỏ tại y=100, sau đó hiển thị các giá trị của textBaseline Trình duyệt của bạn không hỗ trợ thẻ canvas trong HTML5. Code: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 ...

beginPath() trong Canvas
Vẽ 2 nét trong canvas, một màu xanh lá cây và một màu tím Trình duyệt của bạn không hỗ trợ thẻ canvas trong HTML5. Code: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 ...

lineTo() trong Canvas
Bắt đầu nét vẽ, di chuyển tới vị trí 0,0. Tạo một đường thẳng tới vị trí 300,150: Trình duyệt của bạn không hỗ trợ thẻ canvas trong HTML5. Code: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 < ! ...

arc() trong Canvas
Tạo một vòng tròn Trình duyệt của bạn không hỗ trợ thẻ canvas trong HTML5. Code: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 < ! DOCTYPE html > < html > < body > ...

bezierCurveTo() trong Canvas
Vẽ đường cong Bézier bậc 3 Trình duyệt của bạn không hỗ trợ thẻ canvas trong HTML5. Code: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 < ! DOCTYPE html > < html > < body ...

isPointInPath() trong Canvas
Hiển thị hình chữ nhật nếu điểm 20,50 nằm trong hình: Trình duyệt của bạn không hỗ trợ thẻ canvas trong HTML5. Code: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 < ! DOCTYPE html > < ...

clip() trong Canvas
Cắt một khi vực hình chữ nhật có kích thước 200*120 pixels từ canvas. Sau đó, vẽ một hình chữ nhật màu đỏ. Chỉ những phần của hình chữ nhật màu đỏ nằm trong khu vực cắt được hiển thị: Trình duyệt của bạn không hỗ trợ thẻ canvas trong HTML5. Code: ...

lineJoin trong Canvas
Tạo góc tròn giữa 2 dòng kẻ Trình duyệt của bạn không hỗ trợ thẻ canvas trong HTML5. Code: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 < ! DOCTYPE html > < html > ...

quadraticCurveTo() trong Canvas
Tạo một đường cong Bézier bậc 2. Trình duyệt của bạn không hỗ trợ thẻ canvas trong HTML5. Code: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 < ! DOCTYPE html > < html > < ...

stroke() trong Canvas
Vẽ hình chữ L bằng màu đỏ Trình duyệt của bạn không hỗ trợ thẻ canvas trong HTML5. Code: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 < ! DOCTYPE html > < html > < ...

scale() trong Canvas
Vẽ một hình chữ nhật, sau đó phóng to 200% và hiển thị hình mới Trình duyệt của bạn không hỗ trợ thẻ canvas trong HTML5. Code: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 < ! DOCTYPE html > ...

rect() trong Canvas
Vẽ hình chữ nhật có kích thước 50*100 pixels Trình duyệt của bạn không hỗ trợ thẻ canvas trong HTML5. Code: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 < ! DOCTYPE html > < html > ...

rotate() trong Canvas
Quay hình chữ nhật lệch 20 độ Trình duyệt của bạn không hỗ trợ thẻ canvas trong HTML5. Code: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 < ! DOCTYPE html > < html > < body > ...