A textBaseline tulajdonság
A textBaseline tulajdonság a
fillText
vagy a strokeText
metódussal rajzolt szöveg függőleges igazítását adja meg.
A lehetséges értékek egyike: top,
hanging, middle, alphabetic (alapértelmezett),
ideographic, bottom (az értékek megértéséhez
lásd: www.w3schools.com/tags/canvas_textbaseline.asp).
Szintaxis
javascriptkontextus.textBaseline = érték;
Példa
Állítsuk be a szöveg függőleges igazítását a felső vonalra:
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);
Результат:
Példa
Most pedig állítsuk be a szöveg függőleges igazítását az alsó vonalra:
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);
Результат: