Properti textBaseline HTML canvas
Definisi dan penggunaan
Properti textBaseline menetapkan atau mengembalikan basa teks saat menarik teks.
Gambar di bawah ini menunjukkan berbagai basa yang didukung oleh properti textBaseline:
Keterangan:fillText() atau strokeText() Metode menempatkan teks di atas kanvas akan menggunakan nilai textBaseline yang ditentukan.
Contoh
Definisi lingkaran dengan warna biru yang diisi:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
//Gambar garis biru 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="alfabet";
ctx.fillText("Alfabet",190,100);
ctx.textBaseline="gantung";
ctx.fillText("Gantung",290,100);
gramatika
konteks.textBaseline="alphabetic|top|hanging|middle|ideographic|bottom";
Nilai Properti
| Nilai | Deskripsi |
|---|---|
| alphabetic | Default. Basis teks adalah basis huruf biasa. |
| top | Basis teks adalah puncak kotak em. |
| hanging | Basis teks adalah basis tergantung. |
| middle | Basis teks adalah tengah kotak em. |
| ideographic | Basis teks adalah basis makna. |
| bottom | Basis teks adalah dasar kotak em. |
Detil Teknologi
| Nilai Default: | alphabetic |
|---|
Dukungan Browser
Angka di tabel menandai versi browser yang mendukung sifat ini penuh.
| 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 yang lebih awal tidak mendukung elemen <canvas>.
