HTML canvas textAlign özelliği

HTML5 Canvas Referans Kılavuzu

Tanım ve Kullanım

textAlign Özellik, metin içeriğinin mevcut hizalama yöntemini ayarlar veya döndürür.

Genellikle, metin belirlenen konumdan başlar, ancak textAlign="right" olarak ayarlandığında ve metni konum 150'ye yerleştirildiğinde, metin 150 konumunda sona erer.

Açıklama:ile kullanılır. fillText() veya strokeText() Metni gerçekten çizmek ve konumlandırmak için yöntemler kullanılır.

Örnek

150 konumunda bir kırmızı çizgi oluşturun. Konum 150, aşağıdaki örnekte tanımlanan tüm metinlerin köprüsüdür. Her çeşit textAlign özellik değerinin etkisini inceleyin:

Tarayıcınız canvas etiketini desteklememektedir.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// 在位置 150 创建蓝线
ctx.strokeStyle="blue";
ctx.moveTo(150,20);
ctx.lineTo(150,170);
ctx.stroke();
ctx.font="15px Arial";
// 显示不同的 textAlign 值
ctx.textAlign="start";
ctx.fillText("textAlign=start",150,60);
ctx.textAlign="end";
ctx.fillText("textAlign=end",150,80);
ctx.textAlign="left";
ctx.fillText("textAlign=left",150,100);
ctx.textAlign="center";
ctx.fillText("textAlign=center",150,120);
ctx.textAlign="right";
ctx.fillText("textAlign=right",150,140);

Kişisel olarak deneyin

Sözdizimi

context.textAlign="center|end|left|right|start";

Özellik değeri

Değer Açıklama
start Varsayılan. Metin belirlenen konumda başlar.
end Metin belirlenen konumda sona erer.
center Metnin merkezi belirlenen konumda yerleştirilir.
left Metin sola yuvarlanır.
right Metin sağa yuvarlanır.

Teknik ayrıntılar

Varsayılan değer: start

Tarayıcı Desteği

Tablo içindeki rakamlar, bu özelliği ilk tam olarak destekleyen tarayıcı sürümünü belirtir.

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.

HTML5 Canvas Referans Kılavuzu