Contoh
Buat garis merah di posisi 150. Posisi 150 adalah titik anchor untuk semua teks didefinisikan dalam contoh di bawah ini. Mempelajari pengaruh masing-masing nilai properti TextAlign:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// Create a red line in position 150
ctx.strokeStyle="red";
ctx.moveTo(150,20);
ctx.lineTo(150,170);
ctx.stroke();
ctx.font="15px Arial";
// Show the different textAlign values
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); Cobalah sendiri " Dukungan Browser
Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung properti.
| Milik | |||||
|---|---|---|---|---|---|
| textAlign | iya nih | 9.0 | iya nih | iya nih | iya nih |
Definisi dan Penggunaan
The TextAlign set properti atau mengembalikan keselarasan saat ini untuk konten teks, menurut titik anchor.
Biasanya, teks akanMULAI dalam posisi tertentu, namun, jika Anda menetapkan TextAlign = "kanan" dan menempatkan teks dalam posisi 150, itu berarti bahwa teks harus END di posisi 150.
Tip: Gunakan fillText() atau strokeText() metode untuk benar-benar menarik dan posisi teks pada kanvas.
| nilai default: | mulai |
|---|---|
| sintaks JavaScript: | context.textAlign="center|end|left|right|start"; |
Nilai properti
| Nilai | Deskripsi | Mainkan |
|---|---|---|
| start | Default. teks dimulai pada posisi yang ditentukan | Mainkan " |
| end | teks berakhir pada posisi yang ditentukan | Mainkan " |
| center | Pusat teks ditempatkan pada posisi yang ditentukan | Mainkan " |
| left | teks dimulai pada posisi yang ditentukan | Mainkan " |
| right | teks berakhir pada posisi yang ditentukan | Mainkan " |