Properti textBaseline HTML canvas

HTML5 Canvas 参考手册

Definisi dan penggunaan

Properti textBaseline menetapkan atau mengembalikan baseline saat menge draw teks.

Gambar di bawah ini menunjukkan berbagai jenis baseline yang didukung oleh properti textBaseline:

图表文本基线

注释：fillText() atau strokeText() Metode yang digunakan untuk menempatkan teks di atas kanvas akan menggunakan nilai textBaseline yang ditentukan.

Contoh

Definisi persegi panas yang diisi dengan biru:

Browser anda tidak mendukung tag canvas.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
//Garis biru yang ditaruh di posisi y=100
ctx.strokeStyle="biru";
ctx.moveTo(5,100);
ctx.lineTo(395,100);
ctx.stroke();
ctx.font="20px Arial"
//Letakkan setiap kata dengan nilai textBaseline berbeda di y=200
ctx.textBaseline="atas";
ctx.fillText("Atas",5,100);
ctx.textBaseline="bawah";
ctx.fillText("Bawah",50,100);
ctx.textBaseline="tengah";
ctx.fillText("Tengah",120,100);
ctx.textBaseline="alfabetik";
ctx.fillText("Alfabetik",190,100);
ctx.textBaseline="gantung";
ctx.fillText("Gantung",290,100);

Coba sendiri

bahasa

konteks.textBaseline="alphabetic|top|hanging|middle|ideographic|bottom";

属性值

值 描述
alphabetic 默认。文本基线是普通的字母基线。
top 文本基线是 em 方框的顶端。
hanging 文本基线是悬挂基线。
middle 文本基线是 em 方框的正中。
ideographic 文本基线是表意基线。
bottom 文本基线是 em 方框的底端。

技术细节

默认值： alphabetic

浏览器支持

表中的数字注明了首个完全支持该属性的浏览器版本。

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

注释：Internet Explorer 8 以及更早的版本不支持 <canvas> 元素。

HTML5 Canvas 参考手册