Thuộc tính textBaseline của canvas HTML
Định nghĩa và cách sử dụng
Thuộc tính textBaseline thiết lập hoặc trả về giá trị text baseline hiện tại khi vẽ văn bản.
Hình vẽ dưới đây minh họa các giá trị base line được hỗ trợ bởi thuộc tính textBaseline:
Ghi chú:fillText() hoặc strokeText() Khi phương pháp định vị văn bản trên canvas, sẽ sử dụng giá trị textBaseline được chỉ định.
ví dụ
Định nghĩa矩形的 màu xanh để lấp đầy:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
//Vẽ đường blue ở vị trí y=100
ctx.strokeStyle="blue";
ctx.moveTo(5,100);
ctx.lineTo(395,100);
ctx.stroke();
ctx.font="20px Arial"
//Đặt mỗi từ với giá trị textBaseline khác nhau ở y=200
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);
cú pháp
context.textBaseline="alphabetic|top|hanging|middle|ideographic|bottom";
Giá trị thuộc tính
| Giá trị | Mô tả |
|---|---|
| alphabetic | Mặc định. Chuyển dòng văn bản là基线普通字母。 |
| top | Chuyển dòng văn bản là đỉnh của khung em. |
| hanging | Chuyển dòng văn bản là基线悬挂。 |
| middle | Chuyển dòng văn bản là chính giữa khung em. |
| ideographic | Chuyển dòng văn bản là基线意。 |
| bottom | Chuyển dòng văn bản là đáy của khung em. |
Chi tiết kỹ thuật
| Giá trị mặc định: | alphabetic |
|---|
Hỗ trợ trình duyệt
Số trong bảng chỉ ra phiên bản trình duyệt đầu tiên hỗ trợ thuộc tính này hoàn toàn.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Ghi chú:Trình duyệt Internet Explorer 8 và các phiên bản trước không hỗ trợ phần tử <canvas>.
