Contoh
Buat garis merah di posisi 150. Posisi 150 adalah anchor point 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 | 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Definisi dan Penggunaan
The TextAlign set properti atau mengembalikan keselarasan saat ini untuk konten teks, menurut titik anchor.
Biasanya, teks akan START dalam posisi tertentu, namun, jika Anda menetapkan TextAlign = "kanan" dan menempatkan teks di 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-nilai | Deskripsi | Mainkan |
|---|---|---|
| mulai | Default. teks dimulai pada posisi yang ditentukan | Mainkan " |
| akhir | teks berakhir pada posisi yang ditentukan | Mainkan " |
| pusat | Pusat teks ditempatkan pada posisi yang ditentukan | Mainkan " |
| kiri | teks dimulai pada posisi yang ditentukan | Mainkan " |
| kanan | teks berakhir pada posisi yang ditentukan | Mainkan " |
<Canvas Object