Contoh
Menarik garis merah di y=100 , kemudian menempatkan setiap kata di y=100 dengan nilai textBaseline yang berbeda:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
//Draw a red line at y=100
ctx.strokeStyle="red";
ctx.moveTo(5,100);
ctx.lineTo(395,100);
ctx.stroke();
ctx.font="20px Arial"
//Place each word at y=100 with different textBaseline values
ctx.textBaseline="top";
ctx.fillText("Top",5,100);
ctx.textBaseline="bottom";
ctx.fillText("Bottom",50,100);
ctx.textBaseline="middle";
ctx.fillText("Middle",120,100);
ctx.textBaseline="alphabetic";
ctx.fillText("Alphabetic",190,100);
ctx.textBaseline="hanging";
ctx.fillText("Hanging",290,100); Cobalah sendiri " Dukungan Browser
Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung properti.
| Milik | |||||
|---|---|---|---|---|---|
| textBaseline | iya nih | 9.0 | iya nih | iya nih | iya nih |
Catatan: Properti textBaseline bekerja secara berbeda di browser yang berbeda, terutama ketika menggunakan "hanging" atau "ideographic" .
Definisi dan Penggunaan
The textBaseline set properti atau mengembalikan dasar teks saat digunakan ketika menggambar teks.
Ilustrasi di bawah ini menunjukkan berbagai baseline didukung oleh textBaseline atribut:
Catatan: fillText() dan strokeText() metode akan menggunakan nilai textBaseline yang ditentukan ketika posisi teks pada kanvas.
| nilai default: | alfabetis |
|---|---|
| sintaks JavaScript: | context.textBaseline="alphabetic|top|hanging|middle|ideographic|bottom"; |
Nilai properti
| Nilai | Deskripsi | Mainkan |
|---|---|---|
| alphabetic | Default. Teks dasar adalah dasar abjad yang normal | Mainkan " |
| top | Teks dasar adalah atas em persegi | Mainkan " |
| hanging | Teks dasar adalah dasar menggantung | Mainkan " |
| middle | Teks dasar adalah tengah em persegi | Mainkan " |
| ideographic | Teks dasar adalah dasar ideografik | Mainkan " |
| bottom | Teks dasar adalah bagian bawah kotak bounding | Mainkan " |