19/09/2018, 15:00
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 > < ...
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> <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 = "30px Arial"; var txt = "Xin chào" ctx.fillText("awidth:" + ctx.measureText(txt).awidth, 10, 50); ctx.fillText(txt, 10, 100); </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 |  |
 |
 |
 |
 |
|---|---|---|---|---|---|
| measureText() | 4.0 | 2.0 | 9.0 | 3.1 | 9.0 |
Định nghĩa và cách sử dụng
Phương thức measureText() trả về một đối tượng chứa độ dài của chữ với đơn vị là pixel.
Mẹo: Sử dụng phương thức này nếu bạn cần biết độ dài của chữ, trước khi viết nó lên canvas.
Cú pháp JavaScript: context.measureText(text).awidth;
Giá trị tham số
| Tham số | Miêu tả |
|---|---|
| text | Nội dung cần kiểm tra độ dài |
