Teks kanvas HTMLSejajarkan Properti
Contoh
Buat garis merah di posisi 150. Posisi 150 adalah titik jangkar untuk semua teks yang didefinisikan dalam contoh di bawah ini. Pelajari efek dari setiap 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);
Dukungan Peramban
Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung properti.
| Property | |||||
|---|---|---|---|---|---|
| textAlign | Yes | 9.0 | Yes | Yes | Yes |
Definisi dan Penggunaan
Properti textAlign mengatur atau mengembalikan perataan saat ini untuk konten teks, sesuai dengan titik jangkar.
Biasanya, teks akan MULAI pada posisi yang ditentukan, namun, jika Anda mengatur textAlign="kanan" dan menempatkan teks pada posisi 150, itu berarti teks harus AKHIR di posisi 150.
Tip: Gunakan metode fillText() atau strokeText() untuk benar-benar menggambar dan memposisikan teks di kanvas.
| Nilai bawaan: | Mulailah |
|---|---|
| Sintaks JavaScript: | konteks .textAlign="center|end|left|right|start"; |
Nilai properti
| Values | Description | Play it |
|---|---|---|
| start | Default. The text starts at the specified position | |
| end | The text ends at the specified position | |
| center | The center of the text is placed at the specified position | |
| left | The text starts at the specified position | |
| right | The text ends at the specified position |
Referensi Kanvas HTML