textAlign
Canvas textAlign xususiyati
Misol
150-pozitsiyada qizil chiziq chizing. 150-pozitsiya quyidagi misolda belgilangan barcha matnlar uchun tayanch nuqta hisoblanadi. textAlign xususiyatining har bir qiymati qanday natija berishini o‘rganing:
JavaScript:
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
// Create a red line in position 150
ctx.strokeStyle = "red";
ctx.moveTo(150, 20);
ctx.lineTo(150, 170);
ctx.stroke();
ctx.font = "15px Arial";
// Show the different textAlign values
ctx.textAlign = "start";
ctx.fillText("textAlign = start", 150, 60);
ctx.textAlign = "end";
ctx.fillText("textAlign = end", 150, 80);
ctx.textAlign = "left";
ctx.fillText("textAlign = left", 150, 100);
ctx.textAlign = "center";
ctx.fillText("textAlign = center", 150, 120);
ctx.textAlign = "right";
ctx.fillText("textAlign = right", 150, 140);
O‘zingiz sinab ko‘ring »
Tavsif
textAlign xususiyati matn mazmuni uchun joriy tekislashni tayanch nuqtaga nisbatan o‘rnatadi yoki qaytaradi.
Standart qiymat — start.
Shuningdek qarang:
font xususiyati (matn shrifti va o‘lchamini o‘rnatish)
fillStyle xususiyati (matn rangi/gradientini o‘rnatish)
textBaseline xususiyati (matnning asosiy chizig‘ini o‘rnatish)
fillText() metodi (matnni chizish)
strokeText() metodi (matnni chizish)
Sintaksis
| context.textAlign = "center|end|left|right|start" |
Xususiyat qiymatlari
| Qiymatlar | Tavsif | Sinab ko‘rish |
|---|---|---|
| start | Matnning boshlanish pozitsiyasi | Sinab ko‘rish » |
| end | Matnning tugash pozitsiyasi | Sinab ko‘rish » |
| center | Matnning markaziy pozitsiyasi | Sinab ko‘rish » |
| left | Matnning boshlanish pozitsiyasi | Sinab ko‘rish » |
| right | Matnning tugash pozitsiyasi | Sinab ko‘rish » |
Brauzerlarda qo‘llab-quvvatlash
<canvas> elementi HTML5 standartidir (2014).
textAlign 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!