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 ...

Tác giả: Trịnh Tiến Mạnh viết 15:01 ngày 19/09/2018

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 ...

Tác giả: Hoàng Hải Đăng viết 15:00 ngày 19/09/2018

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 > < ...

Tác giả: Hoàng Hải Đăng viết 15:00 ngày 19/09/2018

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 ...

Tác giả: Vũ Văn Thanh viết 15:00 ngày 19/09/2018

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 ...

Tác giả: Trịnh Tiến Mạnh viết 15:00 ngày 19/09/2018

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 ...

Tác giả: Trịnh Tiến Mạnh viết 15:00 ngày 19/09/2018

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 > < ...

Tác giả: Trần Trung Dũng viết 15:00 ngày 19/09/2018

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 ...

Tác giả: Vũ Văn Thanh viết 15:00 ngày 19/09/2018

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 ...

Tác giả: Trịnh Tiến Mạnh viết 15:00 ngày 19/09/2018

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 < ! ...

Tác giả: Trần Trung Dũng viết 14:59 ngày 19/09/2018

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 > ...

Tác giả: Hoàng Hải Đăng viết 14:59 ngày 19/09/2018

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 ...

Tác giả: Trần Trung Dũng viết 14:59 ngày 19/09/2018

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 > < ...

Tác giả: Trịnh Tiến Mạnh viết 14:59 ngày 19/09/2018

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: ...

Tác giả: Trịnh Tiến Mạnh viết 14:59 ngày 19/09/2018

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 > ...

Tác giả: Trần Trung Dũng viết 14:59 ngày 19/09/2018

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 > < ...

Tác giả: Trần Trung Dũng viết 14:59 ngày 19/09/2018

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 > < ...

Tác giả: Tạ Quốc Bảo viết 14:58 ngày 19/09/2018

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 > ...

Tác giả: Trần Trung Dũng viết 14:58 ngày 19/09/2018

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 > ...

Tác giả: Vũ Văn Thanh viết 14:58 ngày 19/09/2018

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 > ...

Tác giả: Trịnh Tiến Mạnh viết 14:58 ngày 19/09/2018