E-learn.ro
Panou utilizatori
Utilizator Parola
Creeaza cont nou    Recupereaza parola
Login
Newsletter
Introdu adresa ta de email
Inscrie-te
Inchide panoul de utilizatori
Add to Google

Tutoriale HTML

Descarca toolbar

Toolbar E-learn.ro Facebook Twitter

WEB DESIGN  /  HTML  /  HTML5 (5)

Folosirea textului in canvas

27.06.2012
Folosirea textului in canvas

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.

Total vizualizari: 2912 2912 afisari   |   Comentarii  0   |   Rating   |   (2 voturi)   |   Timp necesar: 20 min 20 min   |   Nivel de cunostiinte necesar: Mediu  Mediu

Autor: Pustiu Expert
Adauga la tutoriale favorit Adauga la tutoriale favorite
Pagina:
1
comenteaza printeaza

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); 
}

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 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).

Pagina:
1
comenteaza printeaza

Cuvinte cheie:   Tutorial in limba romana HTML5,   canvas,   text,   text 3D,   shadow,  

Alte tutoriale HTML:
Noteaza acest tutorial
Rating tutorial
 
(2 voturi)
Pentru a nota acest tutorial, trebuie sa fii logat!
Posteaza un comentariu
Pentru a posta un comentariu, trebuie sa fii logat!
0 TOP UTILIZATORI* 0 0
Tutoriale scrise de claibornelara
claibornelara Rang utilizator claibornelara - Incepator
4555
Tutoriale scrise de mcuemica
mcuemica Rang utilizator mcuemica - Incepator
4465
Tutoriale scrise de ellarichards
ellarichards Rang utilizator ellarichards - Incepator
4415
Tutoriale scrise de emonclercheap
emonclercheap Rang utilizator emonclercheap - Incepator
4290
Tutoriale scrise de beacherrosa
beacherrosa Rang utilizator beacherrosa - Incepator
4170
* Acest top reprezinta punctajele acumulate in ultimele 30 de zile.
Fotografie CSS Dreamweaver HTML Bridge MySQL Illustrator RoR PHP Sony Vegas Fireworks Lightroom PSD SEO Powerpoint AJAX Swift 3D Word Outlook Javascript StyleSheet Java Excel COREL DRAW Vista Photoshop XHTML JSON Ruby on Rails Gimp XML Action Script Python Verilog SWF Flash
Promovare:
Daca faci parte din comunitatea E-learn.ro si doresti promovarea acesteia, poti accesa pagina de promovare.
Arhiva newsletter:
Daca ai ratat un numar mai vechi, sau vrei sa revezi care au fost noutatile E-learn.ro la un moment dat, poti accesa arhiva de newslettere.
  Copyright © 2008-2013 E-LEARN.ro. Toate drepturile rezervate. Termeni si conditii.
Conceput si realizat de Neokinetics Software