Canvas textBaseline özelliği
Tanım ve Kullanım
textBaseline özelliği, çizim sırasında metin çizginin mevcut temel çizgisini ayarlar veya döndürür.
Aşağıdaki görsel textBaseline özelliğinin desteklediği çeşitli çizgileri gösterir:
Açıklama:fillText() veya strokeText() Canvas üzerinde metin konumlandırılırken, belirlenen textBaseline değeri kullanılacaktır.
örnek
Mavi dolguyla doldurulmuş bir rectangle tanımlayın:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
//y=100 konumunda mavi bir çizgi çizilir
ctx.strokeStyle="blue";
ctx.moveTo(5,100);
ctx.lineTo(395,100);
ctx.stroke();
ctx.font="20px Arial"
//y=200 konumunda farklı textBaseline değerlerinde her kelime yerleştirilir
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);
gramer
context.textBaseline="alphabetic|top|hanging|middle|ideographic|bottom";
özellik değeri
| değer | tanım |
|---|---|
| alphabetic | varsayılan. metin çizgisi sıradan harf çizgisidir. |
| top | metin çizgisi em kutusunun üstünde yer alır. |
| hanging | metin çizgisi asılı çizgide yer alır. |
| middle | metin çizgisi em kutusunun ortasında yer alır. |
| ideographic | metin çizgisi ifadesel çizgide yer alır. |
| bottom | metin çizgisi em kutusunun altında yer alır. |
teknik ayrıntılar
| 默认值： | alphabetic |
|---|
Tarayıcı desteği
Tabloda sayılar, 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> elementini desteklememektedir.
