Atribut textAlign Canvas
Definisi dan penggunaan
textAlign Atribut menentukan, mengatur, atau mengembalikan gaya rata teks konten saat ini berdasarkan tujukan.
Biasanya, teks akan mulai dari posisi yang ditentukan, tetapi jika Anda mengatur textAlign="right" dan menempatkan teks di posisi 150, teks akan berakhir di posisi 150.
Petunjuk:dengan fillText() atau strokeText() Metode ini sebenarnya menggambar dan menempatkan teks di atas kanvas.
Contoh
Buat garis merah di posisi 150. Posisi 150 adalah titik penyangga untuk semua teks yang ditentukan di bawah ini. Studi efek setiap nilai textAlign:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// Buat garis biru di posisi 150
ctx.strokeStyle="blue";
ctx.moveTo(150,20);
ctx.lineTo(150,170);
ctx.stroke();
ctx.font="15px Arial";
// Tampilkan nilai textAlign yang berbeda
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
konteks.textAlign="center|end|left|right|start";
Nilai Atribut
| Nilai | Deskripsi |
|---|---|
| mulai | Default. Text di mulai di posisi yang ditentukan. |
| akhir | Text berakhir di posisi yang ditentukan. |
| tengah | Pusat teks ditempatkan di posisi yang ditentukan. |
| kiri | Text di sebelah kiri. |
| kanan | Text di sebelah kanan. |
Detil Teknologi
| Nilai Default: | mulai |
|---|
Dukungan peramban
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>.
