HTML tuval metniBaseline Özellik
Örnek
y=100'de kırmızı bir çizgi çizin, ardından her kelimeyi farklı textBaseline değerleriyle y=100'e yerleştirin:
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);
Tarayıcı Desteği
Tablodaki sayılar, özelliği tam olarak destekleyen ilk tarayıcı sürümünü belirtir.
| Property | |||||
|---|---|---|---|---|---|
| textBaseline | Yes | 9.0 | Yes | Yes | Yes |
Not: textBaseline özelliği, özellikle "asılı" veya "ideografik" kullanıldığında, farklı tarayıcılarda farklı şekilde çalışır.
Tanım ve Kullanım
textBaseline özelliği, metin çizerken kullanılan geçerli metin taban çizgisini ayarlar veya döndürür.
Aşağıdaki çizim, textBaseline özniteliği tarafından desteklenen çeşitli taban çizgilerini göstermektedir:
Not: fillText () ve StromText() yöntemleri, metni tuval üzerine konumlandırırken belirtilen textBaseline değerini kullanır.
| Varsayılan değer: | alfabetik |
|---|---|
| JavaScript sözdizimi: | bağlam .textBaseline="alfabetik|üst|asılı|orta|ideografik|alt"; |
Mülk değerleri
| 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 |
❮ HTML Kanvas Referansı