Desenarea curbelor in canvas
22.06.2012
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.
6130 afisari 0 Rating (2 voturi) 45 min

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

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.

Copyright © 2008-2010 E-LEARN.ro. Toate drepturile rezervate. Conceput si realizat de Neokinetics Software.