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