19/09/2018, 15:01
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 ...
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 21 22 23 24 25 26 27 28 |
<!DOCTYPE html> <html> <body> <canvas id="myCanvas" awidth="300" height="150" style="border:1px solid #d3d3d3;">Trình duyệt của bạn không hỗ trợ thẻ canvas trong HTML5.</canvas> <script> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.font = "20px Georgia"; ctx.fillText("Xin chào!", 10, 50); ctx.font = "30px Verdana"; // Tạo dải màu var gradient = ctx.createLinearGradient(0, 0, c.awidth, 0); gradient.addColorStop("0", "magenta"); gradient.addColorStop("0.5", "blue"); gradient.addColorStop("1.0", "red"); // Đổ dải màu lên chữ ctx.fillStyle = gradient; ctx.fillText("Cười tươi nào!", 10, 90); </script> </body> </html> |
Demo
Trình duyệt hỗ trợ
Số trong bảng dưới đây thể hiện phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ cho thuộc tính.
| Thuộc tính |  |
 |
 |
 |
 |
|---|---|---|---|---|---|
| fillText() | 4.0 | 2.0 | 9.0 | 3.1 | 9.0 |
Lưu ý: Tham số maxWidth không được hỗ trợ trong trình duyệt Safari.
Định nghĩa và cách sử dụng
Phương thức fillText() sử dụng để vẽ chữ đã được đổ màu trong canvas. Mặc định là màu đen.
Mẹo: Sử dụng thuộc tính font để quy định font chữ và cỡ chữ và sử dụng thuộc tính fillStyle để đổ màu /dải màu lên chữ.
Cú pháp JavaScript: context.fillText(text,x,y,maxWidth);
Giá trị thuộc tính
| Tham số | Miêu tả |
|---|---|
| text | Nội dung để hiển thị trên Canvas |
| x | Tọa độ X điểm bắt đầu viết chữ |
| y | Tọa độ Y điểm bắt đầu viết chữ |
| maxWidth | Tùy chọn. Độ dài lớn nhất của chữ, đơn vị tính là pixels |
