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. :- )
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:
- 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.
- 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>
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>
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 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
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 http://html5.ugyesen.com.
I like this blog its a master peace ! Glad I observed this on google .