Sifat textAlign HTML canvas

Panduan rujukan HTML5 Canvas

Definisi dan penggunaan

textAlign Sifat ini menetapkan atau mengembalikan cara penjajaran teks kini berdasarkan titik penyangga.

Biasanya, teks akan bermula dari lokasi yang ditentukan, tetapi jika anda menetapkan textAlign="right" dan meletakkan teks di lokasi 150, maka teks akan berakhir di lokasi 150.

Panduan:dengan fillText() atau strokeText() Metode ini akan menggambar dan menempatkan teks secara sebenar di atas kanvas.

Contoh

Buat garisan merah di lokasi 150. Lokasi 150 adalah titik penyangga bagi semua teks yang ditakrifkan di bawah ini. Sila kajian kesan bagi setiap nilai textAlign:

Apa browser anda tidak menyokong tag canvas.

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);

Coba sendiri

Sintaks

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

Nilai sifat

Nilai Deskripsi
start Lalai. Teks di tempat yang ditentukan untuk mulai.
end Teks berakhir di tempat yang ditentukan.
center Teks di tengah ditempatkan di tempat yang ditentukan.
left Teks di kiri untuk menyanggupi.
right Teks di kanan untuk menyanggupi.

Butir teknologi

Nilai lalai: start

Dukungan browser

Angka di dalam tabel menunjukkan versi paling awal penggunaan browser yang mendukung sifat ini.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

Komen:Internet Explorer 8 dan versi yang lebih lama tidak mendukung elemen <canvas>.

Panduan rujukan HTML5 Canvas