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: 4280 4280 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

Curba Bezier

Este tot o notiune matematica, fiind cunoscuta ca si o curba cubica, insa denumirea de curba Bezier este mai placuta. Spre deosebire de curba patratica, aceasta are doua puncte de control, fiind astfel mai usor de controlat.

Asadar pentru o desena, asa cum ne-am obisnuit deja, definim contextul 2D al canvasului, si setam stilul liniei:

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

Apoi pozitionam contextul si desenam curba:

    context.bezierCurveTo(150, 10, 420, 10, 420, 180); 
    context.stroke(); 
};

Si in final introducem canvas-ul in body.

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

Curba rezultata ar trebui sa arate ca in imaginea de mai jos:

Sintaxa de baza pentru definirea unei curbe Bezier este:

context.bezierCurveTo(controlPointX1, controlPointY1, controlPointX2, controlPointY2, endingPointX, endingPointY);

Asadar trebuie sa furnizam coordonatele celor doua puncte de control si a punctelor de inceput si de sfarsit.

Zig-zag

Desi nu este o curba propriu-zisa, zig-zag-ul este o linie franta, care ne poate fi utila in anumite contexte. Pentru a desena un zig-zag vom defini contextul si vom ii initializa parametrii.

window.onload = function(){ 
    var canvas = document.getElementById("myCanvas"); 
    var context = canvas.getContext("2d"); 
    var startX = 85; var startY = 70; 
    var zigzagSpacing = 60;

Apoi definim stilul liniei si vom defini punctul de inceput:

    context.lineWidth = 10; 
    context.strokeStyle = "#000000"; 
    context.beginPath(); 
    context.moveTo(startX, startY);

Ca un mic exemplu, vom face litera W, unind 4 linii in zig-zag, apoi facand forma vizibila cu stroke():

// trasam 5 linii 
    for (var n = 0; n < 4; n++) { 
    var x = startX + ((n + 1) * zigzagSpacing); 
    var y; 
    if (n % 2 == 0) { // daca n este par 
        y = startY + 100; 
    } else { // daca n este impar 
        y = startY; 
    }
    context.lineTo(x, y); 
} 
context.stroke(); 
};

Si introducem canvas-ul in body.

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

Si litera noastra facuta din linii in zig-zag ar trebui sa arate asa:

Spirala

Ultima tip de curba pe care il vom desena este o spirala.

window.onload = function(){ 
    var canvas = document.getElementById("myCanvas"); 
    var context = canvas.getContext("2d"); 
    var radius = 0; 
    var angle = 0;
    context.lineWidth = 10; 
    context.strokeStyle = "#000000"; 
    context.beginPath(); 
    context.moveTo(canvas.width / 2, canvas.height / 2);

Si aici vine partea interesanta. Vom roti centrul canvas-ului de 3 ori (50 de iteratii pentru o rotatie completa) in timp ce vom mari raza cu 0.75 la fiecare iteratie si vom desena o linie cu lineTo() de la punctul curent la punctul anterior. La sfarsit facem vizibila spirala cu stroke().

    for (var n = 0; n < 150; n++) { 
    radius += 0.75; 
    // un cerc complet la fiecare iteratie 
    angle += (Math.PI * 2) / 50; 
    var x = canvas.width / 2 + radius * Math.cos(angle); 
    var y = canvas.height / 2 + radius * Math.sin(angle); 
    context.lineTo(x, y); 
    } 
    context.stroke(); 
};

Dupa care evident introducem canvas-ul in body ca in exemplele anterioare. Rezultatul este cel de mai jos:

Cu asta am incheiat tutorialul despre tipurile de curbe si modul in care le desenam in canvas.

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