HTML canvas textBaseline özelliği
Tanım ve Kullanım
textBaseline özelliği, metin çizim sırasında mevcut metin temel çizgisini ayarlar veya döndürür.
Aşağıdaki resim, textBaseline özelliğinin desteklediği çeşitli temel çizgileri göstermektedir:
Açıklama:fillText() veya strokeText() Metni çizge üzerinde konumlandırırken, belirlenen textBaseline değeri kullanılacaktır.
Ornek
Mavi doldurma ile define edilen düzengi:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
//y=100 konumunda mavi çizgi çiz
ctx.strokeStyle="mavi";
ctx.moveTo(5,100);
ctx.lineTo(395,100);
ctx.stroke();
ctx.font="20px Arial"
//y=200'de farklı textBaseline değerleri ile her kelimeyi yerleştir
ctx.textBaseline="yukari";
ctx.fillText("Yukari",5,100);
ctx.textBaseline="alt";
ctx.fillText("Alt",50,100);
ctx.textBaseline="orta";
ctx.fillText("Orta",120,100);
ctx.textBaseline="harfler";
ctx.fillText("Harfler",190,100);
ctx.textBaseline="asagida";
ctx.fillText("Asagida",290,100);
grammar
context.textBaseline="alphabetic|top|hanging|middle|ideographic|bottom";
Özellik Değeri
| Değer | Açıklama |
|---|---|
| alphabetic | Varsayılan. Metin tabanı, sıradan harf tabanındadır. |
| top | Metin tabanı, em kutusunun üstündedir. |
| hanging | Metin tabanı, asılı tabandadır. |
| middle | Metin tabanı, em kutusunun ortasındadır. |
| ideographic | Metin tabanı, anlatım tabanındadır. |
| bottom | Metin tabanı, em kutusunun altındadır. |
Teknik Açıklamalar
| Varsayılan Değer: | alphabetic |
|---|
Tarayıcı Desteği
Tablo'daki numaralar, bu özelliği tam olarak destekleyen ilk tarayıcı sürümünü belirtmektedir.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Açıklama:Internet Explorer 8 ve daha eski sürümler <canvas> ögesini desteklememektedir.
