Properti textAlign Canvas

Definisi dan penggunaan

textAlign Properti berdasarkan titik penyangga, mengatur atau mengembalikan cara penjajaran teks konten saat ini.

通常,文本会从指定位置开始,不过,如果您设置为 textAlign="kiri" 并将文本放置到位置 150,那么会在位置 150 结束。

提示:使用 fillText()strokeText() 方法实际上在画布上绘制并定位文本。

实例

在位置 150 创建一条红线。位置 150 是下面例子中定义的所有文本的锚点。请研究每种 textAlign 属性值的效果:

您的浏览器不支持 canvas 标签。

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// 在位置 150 创建蓝线
ctx.strokeStyle="biru";
ctx.moveTo(150,20);
ctx.lineTo(150,170);
ctx.stroke();
ctx.font="15px Arial";
// 显示不同的 textAlign 值
ctx.textAlign="mulai";
ctx.fillText("textAlign=mulai",150,60);
ctx.textAlign="akhir";
ctx.fillText("textAlign=akhir",150,80);
ctx.textAlign="kiri";
ctx.fillText("textAlign=kiri",150,100);
ctx.textAlign="tengah";
ctx.fillText("textAlign=tengah",150,120);
ctx.textAlign="kiri";
ctx.fillText("textAlign=kiri",150,140);

亲自试一试

语法

konteks.textAlign="center|end|kiri|kiri|mulai";

属性值

描述
mulai 默认。文本在指定的位置开始。
akhir 文本在指定的位置结束。
tengah 文本的中心被放置在指定的位置。
kiri 文本左对齐。
kanan 文本右对齐。

技术细节

默认值: mulai

Pendukung pemeriksaan perekaan

Angka di dalam tabel menunjukkan versi paling awal perekaan yang sepenuhnya mendukung sifat 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>.