Folosirea textului în canvas
Canvas in HTML
June 20, 2012
Efect de schiță în Photoshop
July 5, 2012 |
Tutorial publicat și pe E-learn.ro |
Toate aplicatiile necesita folosirea unui text pentru a comunica in mod eficient ceva utilizatorului. In acest tutorial vom invata sa desenam un text simplu, urmand apoi sa ii aplicam umbre sau efecte 3D.
Incepem prin definirea contextului si a stilului de text:
window.onload = function(){
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.font = "40pt Calibri";
context.fillStyle = "#000000";
Aliniem textul orizontal si vertical si apoi il scriem la propriu:
// aliniem textul centrat orizontal
context.textAlign = "center";
// aliniem textul centrat vertical
context.textBaseline = "middle";
context.fillText("E-learn.ro", canvas.width / 2, 120);
};
Introducem canvas-ul in tag-ul body al documentului nostru HTML.
<body> <canvas id="myCanvas" width="500" height="300" style="border:1px solid #000000"> </canvas> </body>
 |
Pentru a scrie text in canvas, in HTM5, putem defini font-ul si marimea lui cu proprietatea font, culoarea cu proprietatea fillStyle, aliniamentul orizontal cu proprietatea textAlign si aliniamentul vertical cu proprietatea textBaseline.
textAlign poate fi setata left, center sau right (adica stanga, centru sau dreapta) iar textBaseline poate fi setata top, hanging, middle, alphabetic, ideographic sau bottom. Daca nu sunt specificate, aceste setari sunt implicit left, respectiv alphabetic.
In afara de fillText(), API-ul canvas-ului din HTML5 suporta si strokeText():
context.strokeText("E-learn.ro", x, y);
Aceasta metoda va colora perimetrul textului in loc sa il umple. Pentru a seta atat culoarea de umplere cat si cea de linie, putem folosi ambele metode, insa ca buna practica, ar trebui sa folosim intai fillText() si apoi strokeText().
Text 3D cu umbra
Daca textul 2D nu ne incanta prea mult, putem sa incercam varianta textului 3D. Desi API-ul canvas-ului in HTML5 nu ofera direct un mijloc de a crea text 3D, putem crea o metoda personalizata draw3dText().
Incepem ca mai sus prin definirea contextului si a stilului de text:
window.onload = function(){
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.font = "60pt Arial";
context.fillStyle = "#000000";
Aliniem si scriem textul 3D:
// aliniem textul centrat orizontal context.textAlign = "center"; // aliniem textul centrat vertical context.textBaseline = "middle"; draw3dText(context, "E-learn.ro", canvas.width / 2, 120, 5); };
Acum definim functia draw3dText() care va adauga mai multe layer-e de text si umbra:
function draw3dText(context, text, x, y, textDepth){
var n;
// desenam layer-ele din spate
for (n = 0; n < textDepth; n++) {
context.fillText(text, x - n, y - n);
}
// desenam layer-ele din fata cu umbra peste layer-ele din spate
context.fillStyle = "#5E97FF";
context.shadowColor = "#000000";
context.shadowBlur = 10;
context.shadowOffsetX = textDepth + 2;
context.shadowOffsetY = textDepth + 2;
context.fillText(text, x - n, y - n);
}
[/code]
<p class="big">Introducem canvas-ul in tag-ul body al documentului nostru HTML.</p>
<body>
<canvas id="myCanvas" width="500" height="300" style="border:1px solid #000000"> </canvas>
</body>
 |
Pentru a crea impresia de text 3D, suprapunem mai multe layer-e cu acelasi text, lasand astfel senzatia de adancime. In acest exemplu am setat adancimea la 5, insemnand ca metoda customizata draw3dText() va suprapune 5 instante ale textului.
In final setam o culoare diferita layer-ului superior si aplicam o umbra folosind proprietatile shadowColor, shadowBlur, ShadowOffsetX si shadowOffsetY (vom observa in tutorialele ce vor urma ca aceste proprietati nu se limiteaza doar la text).
