Atribut textBaseline Canvas
Definisi dan penggunaan
Atribut textBaseline mengatur atau mengembalikan garis dasar teks saat menggambar teks.
Gambar di bawah menunjukkan berbagai baseline yang didukung oleh atribut textBaseline:
Keterangan:fillText() atau strokeText() Metode menempatkan teks di atas kanvas akan menggunakan nilai textBaseline yang ditentukan.
Contoh
Definisi persegi panas yang diisi warna biru:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
//Garis biru di letak 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="tergantung";
ctx.fillText("Tergantung",290,100);
Sintaks
konteks.textBaseline="alphabetic|atas|tergantung|tengah|ideographic|bawah";
Nilai atribut
| Nilai | Deskripsi |
|---|---|
| alphabetic | Standar. Baseline teks adalah baseline huruf biasa. |
| atas | Baseline teks adalah puncak kotak em. |
| tergantung | Baseline teks adalah baseline tergantung. |
| tengah | Baseline teks adalah tengah kotak em. |
| ideographic | Baseline teks adalah baseline makna. |
| bawah | Baseline teks adalah dasar kotak em. |
Detil teknis
| Nilai standar: | alphabetic |
|---|
Dukungan Peramban
Angka di tabel menunjukkan versi browser pertama yang mendukung atribut 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>.
