Eienskap textBaseline

Die eienskap textBaseline stel die vertikale belyning van teks wat met die metode fillText of die metode strokeText geteken is. Aanvaar een van die moontlike waardes: top, hanging, middle, alphabetic (standaard), ideographic, bottom (vir begrip van die waardes sien www.w3schools.com/tags/canvas_textbaseline.asp).

Sintaksis

javascriptkonteks.textBaseline = waarde;

Voorbeeld

Laat ons vir die teks vertikale belyning volgens die boonste lyn stel:

html<canvas id="canvas" width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptconst canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

ctx.strokeStyle = 'rooi';
ctx.moveTo(0, 100);
ctx.lineTo(400, 100);
ctx.stroke();
ctx.font="14px Arial";
ctx.textBaseline = 'top'; 
ctx.fillText('teks', 80, 100);

Результат:

Voorbeeld

En nou laat ons vir die teks vertikale belyning volgens die onderste lyn stel:

html<canvas id="canvas" width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptconst canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

ctx.strokeStyle = 'rooi';
ctx.moveTo(0, 100);
ctx.lineTo(400, 100);
ctx.stroke();
ctx.font="14px Arial";
ctx.textBaseline="bottom"; 
ctx.fillText('teks', 80, 100); 

Результат:

Sien ook