ტექსტის დახატვა
წინა სტატიაში განვიხილეთ, თუ როგორ უნდა მივანიჭოთ სტილიზაციები და ფერები კანვასის ელემენტებს, ამ სტატიაში კი განვიხილავთ თუ როგორ ჩავწეროთ და დავხატოთ ტექსტი კანვასში.
ტექსტების დახატვა
კანვასში ტექსტების გამოსატანად ვიყენებთ ორ მეთოდს:
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-ში.