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 属性值的效果:
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>.