Свойство textBaseline
Свойство textBaseline
fillText
усули ёки strokeText
усули ёрдамида чиқарилган текстнинг вертикал ҳолатда ҳамланишини белгилаб беради.
Қуйидаги қийматлардан бирини қабул қилади: top,
hanging, middle, alphabetic (андоза бўйича),
ideographic, bottom (қийматларни тушуниш учун
қаранг: www.w3schools.com/tags/canvas_textbaseline.asp).
Синтаксис
javascriptконтекст.textBaseline = қиймат;
Мисол
Келинг, текст учун вертикал ҳамлашни юқориги чизиқ бўйича белгилаймиз:
html<canvas id="canvas" width="200" height="200" style="background: #f4f4f4;"></canvas>javascriptconst canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
ctx.strokeStyle = 'red';
ctx.moveTo(0, 100);
ctx.lineTo(400, 100);
ctx.stroke();
ctx.font="14px Arial";
ctx.textBaseline = 'top';
ctx.fillText('text', 80, 100);
Результат:
Мисол
Энди эса, текст учун вертикал ҳамлашни пастги чизиқ бўйича белгилаймиз:
html<canvas id="canvas" width="200" height="200" style="background: #f4f4f4;"></canvas>javascriptconst canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
ctx.strokeStyle = 'red';
ctx.moveTo(0, 100);
ctx.lineTo(400, 100);
ctx.stroke();
ctx.font="14px Arial";
ctx.textBaseline="bottom";
ctx.fillText('text', 80, 100);
Результат: