ტექსტის დახატვა

წინა სტატიაში განვიხილეთ, თუ როგორ უნდა მივანიჭოთ სტილიზაციები და ფერები კანვასის ელემენტებს, ამ სტატიაში კი განვიხილავთ თუ როგორ ჩავწეროთ და დავხატოთ ტექსტი კანვასში.

ტექსტების დახატვა

კანვასში ტექსტების გამოსატანად ვიყენებთ ორ მეთოდს:

fillText

fillText(text, x, y [, maxWidth]) მეთოდი გამოიყენება ტექსტის ჩასაწერად. მეთოდი პარამეტრად ღებულობს 4 მნიშვნელობას:

• text - რა ჩაწეროს.
• x - რომელი x კოორდინატიდან.
• y - რომელი y კოორდინატიდან.
• maxWidth - მაქსიმუმი სიგანე დასახატად (პარამეტრი არ არის სავალდებულო).

<canvas id="textCanvas" width="150" height="150"></canvas>

const textCanvas = document.querySelector('#textCanvas');

if (textCanvas.getContext) {
  const ctx = textCanvas.getContext('2d');
  ctx.font = '48px serif';
  ctx.fillText('Iswavle', 22, 22);
}

strokeText

strokeText მეთოდი საკმაოდ წააგავს fillText მეთოდს. განსხვავება მათ შორის არის გამოტანილ ტექსტში: fillText შეავსებს ტექსტს სტანდარტული სახით ხოლო strokeText stroke სტილიზაციას მისცემს (ჩარჩოს მაგვარი ტექსტი).

strokeText(text, x, y [, maxWidth]) მეთოდი იგივე პარამეტრებს ღებულობს, რასაც fillText.

<canvas id="strokeTextCanvas" width="150" height="150"></canvas>

const strokeTextCanvas = document.querySelector('#strokeTextCanvas');

if (strokeTextCanvas.getContext) {
  const ctx = strokeTextCanvas.getContext('2d');
  ctx.font = '22px serif';
  ctx.strokeText('EverREST', 22, 44);
}

ტექსტების სტილიზაცია

წინა მაგალითებში განვიხილეთ font გასტილვა, რომელიც საშუალებას გვაძლევს გავსტილოთ ტექსტის თვისებები, როგორც CSS-ში. განვიხილოთ სხვა თვისებებიც:

textAlign

textAlign თვისება გამოიყენება ტექსტის პოზიცირებისთვის. შესაძლო მნიშვნელობები: start, end, left, right ან center. ნაგულისხმევად აქვს start.

textBaseLine

textBaseline თვისება გამოიყენება ტექსტის სიმაღლის გასწორებისთვის. შესაძლო მნიშვნელობები: top, hanging, middle, alphabetic, ideographic და bottom. ნაგულისხმევად აქვს alphabetic.

direction

direction თვისება გამოიყენება ტექსტის მიმართულების გაწერისთვის. შესაძლო მნიშვნელობები: ltr, rtl და inherit. ნაგულისხმევად აქვს inherit.

<canvas id="basicStylesCanvas" width="150" height="150"></canvas>

const basicStylesCanvas = document.querySelector('#basicStylesCanvas');

if (basicStylesCanvas.getContext) {
  const ctx = basicStylesCanvas.getContext('2d');
  ctx.font = '22px serif';
  ctx.strokeStyle = 'steelblue';
  ctx.textAlign = 'center';
  ctx.strokeText('Educata', 100, 44);
}

შეჯამება

ტექსტის გამოტანა არამხოლოდ HTML თეგებში არის შესაძლებელი, არამედ canvas-სის ელემენტშიც, სადაც ანალოგიური CSS თვისებები შეგვიძლია გავუწეროთ.

იხილეთ სტატიის სამაგალითო კოდები playground-ში.