tutorial pengembangan web terbaru
 

HTML canvas textAlign Propery

<Canvas Object

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:

YourbrowserdoesnotsupporttheHTML5canvastag.

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