Thuộc tính textBaseline của Canvas
Định nghĩa và cách sử dụng
Thuộc tính textBaseline thiết lập hoặc trả về đường cơ bản hiện tại của văn bản khi vẽ văn bản.
Hình minh họa dưới đây trình bày các đường cơ bản đượ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.
Mẫu
Định nghĩa hình vuông được tô màu xanh:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
//Vẽ đường蓝色 ở 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. Chuỗi văn bản cơ bản là đường cơ bản của chữ cái thông thường. |
| top | Chuỗi văn bản cơ bản là đỉnh của khung em. |
| hanging | Chuỗi văn bản cơ bản là đường cơ bản treo. |
| middle | Chuỗi văn bản cơ bản là chính giữa khung em. |
| ideographic | Chuỗi văn bản cơ bản là đường cơ bản biểu đạt. |
| bottom | Chuỗi văn bản cơ 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 sớm hơn không hỗ trợ phần tử <canvas>.
