Betű-vetés, HTML5 Canvas text

Ebben a cikkben megnézzük, hogy hogyan lehet szöveget varázsolni a rajzvászonra. Talán egyszerűbb dolgunk lesz, mint a különböző alakzatokkal. Sajnos egyelőre a formázásoknak csak egy viszonylag szűk köre áll rendelkezésünkre és sajnos a CSS3 eljárások, trükkök egyike sem használható. Emiatt személy szerint úgy érzem, hogy egy kicsit elhanyagolt területe a HTML5 újdonságainak. Pedig véleményem szerint szép lehetőségeket jelentene, ha pár CSS3 eljárást használva megformázhatnánk a megjelenő szövegeinket.

Nézzük, milyen eszközeink vannak a szöveg formázására, kiiratására:

  • Font (Értékei: betűcsalád, betűstílus, betűváltozat, betűméret és vastagság.)
  • TextAlign (ahogy a neve is mutatja a szöveg igazítását szabályozza, értékei rendre a következők lehetnek: start, end, right, left, center)
  • TextBaseline (a szöveg kezdőponthoz viszonyított abszolút helyzetét adja meg, értékei: top, hanging, middle, bottom, alphabetic, ideographic)

A következő ábra a WHATWG által demonstrált textBaseline tulajdonságot hivatott magyarázni. Nem gondolom hogy különösebb hozzáfűznivalót igényel, de annyi biztos, hogy egy kicsit túlzásba vitték a fiúk a Szilícium völgyben. :- )

baselines-canvas

textBaseline

A szöveg kiiratása már picit érdekesebb. Van két lehetőségünk, illetve biztosan van még számos, de számomra ez a két módszer tűnt épkézláb megoldásnak. Magát a kiiratást a fillText(”szöveg”,x,y koordináták) megfelelő paraméterezésével tehetjük meg. És pontosan ebből adódik a többféle megoldás:

  1. ctx.fillText(”Hahó”, 200, 50); – Ebben az esetben a HAHÓ szövegünket a 200, 50 koordinátájú ponttól kezdjük kiíratni, ugye emlékszünk még hogy a rajzvászon bal felső sarka a 0,0 origó pont.
  2. ctx.fillText(”Hahó”,x,y); – Hogy mi ebben a szép? Az x,y változónak előtte adhatunk értéket, vagy menet közben változtathatjuk.

Nézzünk erre egy példát, hogy még érthetőbb legyen:

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>CANVAS betű-vetés</title>
<style>
#rajzvaszon {
border: 1px solid #3a3939; /*csak azért, hogy látszódjon, egy vékony keret*/
}
</style>
</head>

<body>

<canvas id="rajzvaszon" width="500" height="500">
</canvas>

<script>
var canvas = document.getElementById('rajzvaszon');
var ctx = canvas.getContext('2d');
var x = canvas.width / 2;     // Definiálom az x, y értékeit, a rajzvászon méreteinek fele
var y = canvas.height / 2;    // Hogy középre menjen a szöveg

ctx.font = "40pt Calibri";     //betű paramétereinek megadása
ctx.textAlign = "center";      // Vízszintes igazítás
ctx.textBaseline = "middle";   // függőleges igazítás
ctx.fillStyle = "blue";        //színbeállítás
ctx.fillText("Hahó Canvas!", x, y); //szöveg kiiratása, x,y változó segítségével
</script>

</body>
</html> 

A példa itt elérhető.

Nézzük meg, mekkora a szövegünk mérete px-ben. Erre egy érdekes megoldást találtam a specifikációban. Melyet a measureText(text); függvény segítségével tudunk vizsgálni.
A fenti példát annyiban kell módosítanunk, hogy egy text változóba tegyük bele a kiíratandó szövegünket és a fillText(text, x,y); -t használjuk a kiiratáshoz.

Megvan a Hahó Canvas! szövegünk, de hány pixel széles ? Lássuk.

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>CANVAS betű-vetés</title>
<style>
#rajzvaszon {
border: 1px solid #3a3939; /*csak azért, hogy látszódjon, egy vékony keret*/
}
</style>
</head>

<body>

<canvas id="rajzvaszon" width="500" height="500">
</canvas>

<script>
var canvas = document.getElementById('rajzvaszon');
var ctx = canvas.getContext('2d');
var x = canvas.width / 2;   // Definiálom az x, y értékeit, itt a rajzvászon méreteinek fele
var y = canvas.height / 2;  // Hogy középre menjen a szöveg
var text = "Hahó Canvas!";  // rakjuk a text-be a kiiratandó szövegünket

ctx.font = "40pt Calibri";   // betű paramétereinek megadása
ctx.textAlign = "center";    // Vízszintes igazítás
ctx.textBaseline = "middle"; // függőleges igazítás
ctx.fillStyle = "blue";    // színbeállítás
ctx.fillText(text, x,y);   // szöveg kiiratása text,x,y,változó segítségével

var metrics = ctx.measureText(text);  // lekérjük a szöveg mérőszámait
var width = metrics.width;            // a szélességbe betesszük a mérőszámunkat

ctx.font = "20pt Calibri";    // majd szépen ezt is kiíratjuk a képernyőre
ctx.textAlign = "center";
ctx.fillStyle = "black";
ctx.fillText("(" + width + " px széles)", x, y + 35);
// kiíratjuk a width értékét, majd a px széles szöveget mögé tesszük
// az y koordinátám értékét azért növeltem, hogy lejjebb kerüljön a plusz szöveg
</script>

</body>
</html>

A példa itt megtekinthető.

Tegyünk a példába egy csavart, mondjuk forgassuk meg a szöveget 90 fokkal. 🙂 Erre a translate() és a rotate () függvényeket használhatjuk a következőképen:

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>CANVAS betű-vetés</title>
<style>
#rajzvaszon {
border: 1px solid #3a3939; /*csak azért, hogy látszódjon, egy vékony keret*/
}
</style>
</head>

<body>

<canvas id="rajzvaszon" width="500" height="500">
</canvas>

<script>
var canvas = document.getElementById('rajzvaszon');
var ctx = canvas.getContext('2d');
var x = canvas.width / 2;     // Definiálom az x, y értékeit, itt a rajzvászon méreteinek fele
var y = canvas.height / 2;    // Hogy középre menjen a szöveg
var text = "Hahó Canvas!";  // rakjuk a text-be a kiiratandó szövegünket

ctx.font = "40pt Calibri";     // betű paramétereinek megadása
ctx.textAlign = "center";    // Vízszintes igazítás
ctx.textBaseline = "middle";   // függőleges igazítás
ctx.fillStyle = "blue";     // színbeállítás
ctx.fillText(text, x,y);     // szöveg kiiratása text,x,y,változó segítségével

ctx.translate(x, y);          //translate x, y
ctx.rotate(Math.PI/2);        //Forgatás
 ctx.textAlign = "center";
 ctx.fillText("Hahó",100, 0);  //kiiratás
</script>

</body>
</html>

A példa itt megtekinthető

A következő részben a képekkel foglalkozunk, valamint azok manipulációjával.

Forrás:

http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#text-0

Creative Commons Licenc
Betű-vetés, HTML5 Canvas text a Creative Commons Nevezd meg! – Ne add el! – Így add tovább! 2.5 Magyarország Licenc alatt van.
Permissions beyond the scope of this license may be available at https://html5.ugyesen.com.

You may also like...