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)

Desenarea curbelor in canvas

22.06.2012
Desenarea curbelor in canvas

Curbele sunt elemente de baza cu care lucram atunci cand vine vorba de desenatul in canvas in HTML5. In acest tutorial vom invata despre tipurile de curbe pe care le putem folosi in canvas.

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

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

Curbele sunt elemente de baza cu care lucram atunci cand vine vorba de desenatul in canvas in HTML5. In acest tutorial vom invata despre tipurile de curbe pe care le putem folosi in canvas.

Arcul

In situatiile pe care le veti intalni, veti avea probabil nevoie sa desenati arce perfecte de cerc (precum intr-un smiley, o diagrama etc).

Pentru a desena un arc va trebui in primul rand sa definim un context 2D si sa setam stilul folosit pentru arc (mentionez ca in tutorialul Canvas in HTML5 am definit un template cu ajutorul caruia sa putem lucra exemplele mai usor):

window.onload = function(){ 
    var canvas = document.getElementById("myCanvas"); 
    var context = canvas.getContext("2d"); 
    context.lineWidth = 10; 
    context.strokeStyle = "#000000"; // culoarea liniei

In continuare desenam arcul:

    context.arc(canvas.width / 2, canvas.height / 2 + 40, 80, 1.1 * Math.PI, 1.9 * Math.PI, false); 
    context.stroke(); 
};

si introducem canvas-ul in body-ul paginii noastre:

<body> 
    <canvas id="myCanvas" width="500" height="300" style="border:1px solid #000000"> </canvas> 
</body>

Asa ar trebui sa arate arcul nostru de cerc.

Acum pentru a intelege ce se intampla acolo, e nevoie de putina matematica. Un cerc este definit de un centru si o raza. In cazul nostru, circumferinta sectiunii noastre de cerc este definita de un unghi de pornire, unul de oprire, si de sensul in care este desenata.

context.arc(centerX, centerY, radius, startingAngle, endingAngle, counterclockwise);

Am folosit ca unghiuri de pornire, respectiv de oprire 1. 1Π si 1.9Π deoarece sunt putin dreasupra centrului. Cand desenam arce de cerc nu trebuie sa ne limitam la valori ale unghiurilor intre 0Π si 2Π. Putem folosi orice valori reale, deoarece liniile se vor suprapune la parcurgerea cercului.

O alta metoda de a crea arce de cerc in canvas este arcTo(). Arcul rezultat folosind aceasta metoda este definit de un punct in context, un punct de control, un punct de sfarsit si o raza.

context.arcTo(controlPointX1, controlPointY1, endingPointX, endingPointY, radius);

Spre deosebire de metoda arc(), ce pozitioneaza arcul in functie de punctul central, metoda arcTo() este dependenta de punctul din context, la fel ca in metoda lineTo(). Metoda arcTo() este folosita cel mai frecvent atunci cand vrem sa cream colturi rotunjite pentru forme.

Curba patratica

Pentru unii deja revin fiori reci pe sira spinarii, si amintiri din orele de matematica. Imi pare rau, insa curba patratica ofera mai multa flexibilitate si naturalete curburii unei linii, si reprezinta un bun mod de a crea forme personalizate.

Definim contextul 2D al canvasului si stilul:

window.onload = function(){ 
    var canvas = document.getElementById("myCanvas"); 
    var context = canvas.getContext("2d"); 
    context.lineWidth = 10; 
    context.strokeStyle = "#000000"; // culoarea liniei

Pozitionam contextul si trasam curba:

    context.moveTo(100, canvas.height - 50); 
    context.quadraticCurveTo(canvas.width / 2, -50, canvas.width - 100, canvas.height - 50); 
    context.stroke(); 
};

Si introducem canvas-ul in body:

<body> 
    <canvas id="myCanvas" width="500" height="300" style="border:1px solid #000000"> </canvas> 
</body>

Ar trebui sa arate ca mai jos:

Sintaxa de baza pentru definirea unei curbe patratice este:

context.quadraticCurveTo(controlX, controlY, endingPointX, endingPointY);
Pagina:
1 2 »
comenteaza printeaza

Cuvinte cheie:   Tutorial limba roman HTML5,   curbe,   canvas,   HMLT5,   arc,   Bezier,   zig-zag,   javascript

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
4810
Tutoriale scrise de mcuemica
mcuemica Rang utilizator mcuemica - Incepator
4750
Tutoriale scrise de ellarichards
ellarichards Rang utilizator ellarichards - Incepator
4625
Tutoriale scrise de emonclercheap
emonclercheap Rang utilizator emonclercheap - Incepator
4560
Tutoriale scrise de beacherrosa
beacherrosa Rang utilizator beacherrosa - Incepator
4420
* Acest top reprezinta punctajele acumulate in ultimele 30 de zile.
Excel PHP Bridge JSON Photoshop XML CSS Vista Word Sony Vegas Flash Outlook Java Verilog Powerpoint PSD Lightroom SEO Action Script Gimp SWF Ruby on Rails Swift 3D Dreamweaver AJAX Javascript Fotografie Fireworks XHTML StyleSheet Python MySQL HTML COREL DRAW RoR Illustrator
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