Teks kanvas HTMLBaseline Property
Contoh
Gambar garis merah pada y=100, lalu tempatkan setiap kata pada 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);
Dukungan Peramban
Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung properti.
| Property | |||||
|---|---|---|---|---|---|
| textBaseline | Yes | 9.0 | Yes | Yes | Yes |
Catatan: Properti textBaseline bekerja secara berbeda di browser yang berbeda, terutama saat menggunakan "menggantung" atau "ideografis".
Definisi dan Penggunaan
Properti textBaseline menyetel atau mengembalikan garis dasar teks saat ini yang digunakan saat menggambar teks.
Ilustrasi di bawah ini menunjukkan berbagai baseline yang didukung oleh atribut textBaseline:
Catatan: Metode fillText() dan strokeText() akan menggunakan nilai textBaseline yang ditentukan saat memposisikan teks di kanvas.
| Nilai bawaan: | alfabetis |
|---|---|
| Sintaks JavaScript: | context .textBaseline="alphabetic|top|hanging|middle|ideographic|bottom"; |
Nilai properti
| Values | Description | Play it |
|---|---|---|
| alphabetic | Default. The text baseline is the normal alphabetic baseline | |
| top | The text baseline is the top of the em square | |
| hanging | The text baseline is the hanging baseline | |
| middle | The text baseline is the middle of the em square | |
| ideographic | The text baseline is the ideographic baseline | |
| bottom | The text baseline is the bottom of the bounding box |
Referensi Kanvas HTML