19/09/2018, 15:00
textBaseline trong Canvas
Vẽ một đường thằng màu đỏ tại y=100, sau đó hiển thị các giá trị của textBaseline 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 20 21 22 23 24 25 26 ...
Vẽ một đường thằng màu đỏ tại y=100, sau đó hiển thị các giá trị của textBaseline
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 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
<!DOCTYPE html> <html> <body> <canvas id="myCanvas" awidth="400" height=200" 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"); //Vẽ một đường thằng màu đỏ tại y=100 ctx.strokeStyle = "red"; ctx.moveTo(5, 100); ctx.lineTo(395, 100); ctx.stroke(); ctx.font = "20px Arial" //Viết chữ tại y=100 hiển thị các giá trị của textBaseline 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); </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 |  |
 |
 |
 |
 |
|---|---|---|---|---|---|
| textBaseline | 4.0 | 2.0 | 9.0 | 3.1 | 9.0 |
Lưu ý: Thuộc tính textBaseline hoạt động khác nhau trên mỗi trình duyệt, đặc biệt là khi sử dụng “hanging” và “ideographic”.
Định nghĩa và cách sử dụng
Thuộc tính textBaseline dùng để thiết lập hoặc trả về đường cơ sở được dùng để hiển thị chữ.
Hình minh họa dưới đây cho thấy các đường cơ sở khác nhau được thuộc tính textBaseline hỗ trợ:
Lưu ý: Phương thức fillText() và strokeText() sẽ sử dụng giá trị của textBaseline khi định vị chữ trên canvas.
Giá trị mặc định: alphabetic
Cú pháp JavaScript: context.textBaseline=”alphabetic|top|hanging|middle|ideographic|bottom”;
Giá trị thuộc tính
| Giá trị | Miêu tả |
|---|---|
| alphabetic | Mặc định. Đường cơ sở nằm ở chân chữ |
| top | Đường cơ sở nằm ở trên viền bao ngoài của chữ |
| hanging | Đường cơ sở nằm treo phía trên chữ và viền bao trên (Bắc Ấn Độ sử dụng loại này) |
| middle | Đường cơ sở nằm ở giữa chữ |
| ideographic | Đường cơ sở là đường tượng hình của chữ |
| bottom | Đường cơ sở nằm ở dưới viền bao ngoài của chữ |
