HTML canvas textAlign properti
Definisi dan penggunaan
textAlign Properti ini menetapkan atau mengembalikan cara penjajaran teks konten saat ini berdasarkan titik taut.
Biasanya, teks akan mulai dari posisi yang ditentukan, tetapi, jika Anda mengatur textAlign="right" dan menempatkan teks di posisi 150, maka teks akan berakhir di posisi 150.
Petunjuk:dengan fillText() atau strokeText() Metode ini akan menggambar dan menempatkan teks secara langsung di atas kanvas.
Contoh
Buat garis merah di posisi 150. Posisi 150 adalah titik taut bagi semua teks yang didefiniskan di contoh di bawah ini. Silakan studi efek nilai textAlign:
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);
Sintaks
context.textAlign="center|end|left|right|start";
Nilai Atribut
| Nilai | Deskripsi |
|---|---|
| start | Default. Teks dimulai di posisi yang ditentukan. |
| end | Teks berakhir di posisi yang ditentukan. |
| center | Teks di tengah ditempatkan di posisi yang ditentukan. |
| left | Text kiri jarak kiri. |
| right | Text kanan jarak kanan. |
Detil Teknik
| Nilai Default: | start |
|---|
Dukungan Browser
Angka di tabel menunjukkan versi browser pertama yang mendukung atribut ini.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Keterangan:Internet Explorer 8 dan versi sebelumnya tidak mendukung elemen <canvas>.
