HTML canvas textBaseline Thuộc tính
Thí dụ
Vẽ một đường màu đỏ tại y = 100, sau đó đặt mỗi từ tại y = 100 với các giá trị textBaseline khác nhau:
JavaScript:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
//Draw a red line at y = 100
ctx.strokeStyle = "red";
ctx.moveTo(5, 100);
ctx.lineTo(395, 100);
ctx.stroke();
ctx.font = "20px Arial"
//Place each word at y = 100 with different textBaseline values
ctx.textBaseline = "top";
ctx.fillText("Top", 5, 100);
ctx.textBaseline = "bottom";
ctx.fillText("Bottom", 50, 100);
ctx.textBaseline = "middle";
ctx.fillText("Middle", 120, 100);
ctx.textBaseline = "alphabetic";
ctx.fillText("Alphabetic", 190, 100);
ctx.textBaseline = "hanging";
ctx.fillText("Hanging", 290, 100);
Hỗ trợ trình duyệt
Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ thuộc tính.
| Property | |||||
|---|---|---|---|---|---|
| textBaseline | Yes | 9.0 | Yes | Yes | Yes |
Lưu ý: Thuộc tính textBaseline hoạt động khác nhau trong các trình duyệt khác nhau, đặc biệt khi sử dụng "treo" hoặc "tưởng tượng".
Định nghĩa và Cách sử dụng
Thuộc tính textBaseline đặt hoặc trả về đường cơ sở văn bản hiện tại được sử dụng khi vẽ văn bản.
Hình minh họa bên dưới thể hiện các đường cơ sở khác nhau được hỗ trợ bởi thuộc tính textBaseline:
Lưu ý: Các phương thức fillText () và strokeText () sẽ sử dụng giá trị textBaseline được chỉ định khi định vị văn bản trên canvas.
| Giá trị mặc định: | bảng chữ cái |
|---|---|
| Cú pháp JavaScript: | context .textBaseline = "alphabetic | top | treo | middle | Ideographic | bottom"; |
Giá trị tài sản
| Values | Description | Play it |
|---|---|---|
| alphabetic | Default. The text baseline is the normal alphabetic baseline | |
| top | The text baseline is the top of the em square | |
| hanging | The text baseline is the hanging baseline | |
| middle | The text baseline is the middle of the em square | |
| ideographic | The text baseline is the ideographic baseline | |
| bottom | The text baseline is the bottom of the bounding box |
❮ Tham chiếu HTML Canvas