Phương thức canvas MeasureText()
Ví dụ
Kiểm tra độ rộng của văn bản trước khi viết nó trên khung vẽ:
JavaScript:
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
let txt = "Hello World"
ctx.fillText("width:" + ctx.measureText(txt).width, 10, 50)
ctx.fillText(txt, 10, 100);
Hãy tự mình thử »Cũng vậy:
Thuộc tính phông chữ (Đặt phông chữ và kích thước văn bản)
Thuộc tính fillStyle (Đặt màu văn bản/độ chuyển màu)
Thuộc tính textAlign (Đặt căn chỉnh văn bản)
Thuộc tính textBaseline (Đặt đường cơ sở văn bản)
Phương thức fillText() (Vẽ văn bản)
Phương thức StrokeText() (Vẽ văn bản)
Sự miêu tả
Phương thức MeasureText() trả về một đối tượng chứa chiều rộng của văn bản đã chỉ định, tính bằng pixel.
Mẹo: Sử dụng phương pháp này nếu bạn cần biết chiều rộng của văn bản trước khi viết nó lên khung vẽ.
Cú pháp JavaScript: | bối cảnh .measureText( text ).width; |
---|
Giá trị tham số
Param | Description | Play it |
---|---|---|
text | The text to be measured | Play it » |
Hỗ trợ trình duyệt
Phần tử <canvas>
là tiêu chuẩn HTML5 (2014).
measureText()
được hỗ trợ trong tất cả các trình duyệt hiện đại:
Chrome | Edge | Firefox | Safari | Opera | IE |
Yes | Yes | Yes | Yes | Yes | 9-11 |
❮ Tham khảo Canvas