createImageData() trong Canvas
Tạo một đối tượng ImageData có kích thước 100*100 với mỗi pixel được thể hiện 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 22 23 24 ...
globalAlpha trong Canvas
Đầu tiên, vẽ một hình chữ nhật màu đỏ, sau đó thiết lập độ mờ (globalAlpha) là 0.5 và vẽ hai hình chữ nhật, một màu đỏ, một màu xanh: 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 ...
getImageData() trong Canvas
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 < ! DOCTYPE html > < html > < body > < canvas id = "myCanvas" awidth = "300" height = "150" ...
globalCompositeOperation trong Canvas
Vẽ hình chữ nhật sử dụng nhiều giá trị của thuộc tính globalCompositeOperation. Hình chữ nhật màu đỏ là hình đích (destination). Hình chữ nhật màu xanh là hình nguồn (source): Trình duyệt của bạn không hỗ trợ thẻ canvas trong HTML5. Code: 1 ...
ImageData height trong Canvas
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 < ! DOCTYPE html > < html > < body > < canvas id = "myCanvas" awidth = "300" height = ...
transform() trong Canvas
Vẽ một hình chữ nhật, tạo một ma trận biến đổi với transform(), vẽ lại hình chữ nhật, tạo một ma trận biến đổi mới, lại vẽ lại hình chữ nhật. Lưu ý mỗi khi bạn gọi phương thức transform(), nó sẽ xây dựng dựa trên ma trận biến đổi trước đó: Trình duyệt của bạn không hỗ trợ thẻ canvas trong ...
ImageData data trong Canvas
Tạo một đối tượng ImageData có kích thước 100*100 với mỗi pixel được thể hiện 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 22 23 24 ...
font trong Canvas
Chữ có kích cỡ 30px trong canvas sử dụng font Arial: 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 ...
translate() trong Canvas
Vẽ một hình chữ nhật tại vị trí (10,10), di chuyển vị trí gốc (0,0) sang tọa độ (70,70). Vẽ lại hình chữ nhật lần nữa (lưu ý là vị trí hình chữ nhật lúc này là (80,80): Trình duyệt của bạn không hỗ trợ thẻ canvas trong HTML5. Code: 1 2 3 4 ...
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 > ...
