textBaseline
Canvas textBaseline xususiyati
Misol
y=100 da qizil chiziq chizing, so‘ngra har bir so‘zni turli textBaseline qiymatlari bilan y=100 ga joylashtiring:
JavaScript:
const canvas = document.getElementById("myCanvas");
const ctx = canvas.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);
O‘zingiz sinab ko‘ring »
Tavsif
textBaseline xususiyati matn chizishda ishlatiladigan asosiy chiziqni (baseline) o‘rnatadi yoki qaytaradi.
Standart qiymat — alphabetic
textBaseline qo‘llab-quvvatlaydigan asosiy chiziqlarni quyidagi rasmda ko‘ring:
Shuningdek qarang:
font xususiyati (matn shrifti va o‘lchamini o‘rnatish)
fillStyle xususiyati (matn rangi/gradientini o‘rnatish)
textAlign xususiyati (matnni tekislashni o‘rnatish)
fillText() metodi (matnni chizish)
strokeText() metodi (matnni chizish)
Eslatma
fillText() ham, strokeText() ham matn chizishda textBaseline qiymatidan foydalanadi.
Sintaksis
| context.textBaseline = "alphabetic|top|hanging|middle|ideographic|bottom" |
Xususiyat qiymatlari
| Qiymatlar | Tavsif | Sinab ko‘rish |
|---|---|---|
| alphabetic | Oddiy alifbo asosiy chizig‘i | Sinab ko‘rish » |
| top | Em kvadratining yuqori qismi | Sinab ko‘rish » |
| hanging | Osma asosiy chiziq (hanging) | Sinab ko‘rish » |
| middle | Em kvadratining o‘rtasi | Sinab ko‘rish » |
| ideographic | Ideografik asosiy chiziq | Sinab ko‘rish » |
| bottom | Chegaralovchi to‘rtburchakning (bounding box) pastki qismi | Sinab ko‘rish » |
Brauzerlarda qo‘llab-quvvatlash
<canvas> elementi HTML5 standartidir (2014).
textBaseLine barcha zamonaviy brauzerlarda qo‘llab-quvvatlanadi:
| Chrome | Edge | Firefox | Safari | Opera | IE |
| Ha | Ha | Ha | Ha | Ha | 9-11 |
❮ Canvas ma’lumotnomasi
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!