Basic HTML Version
Linux Inside
77
context.bezierCurveTo(10, 400, 200, -300,
200,200);
Από μόνες τους όμως οι καμπύλες δεν κάνουν και πολλά
πράγματα.
Τις χρειαζόμαστε για να τις συνδυάζουμε και να δημιουρ-
γούμε πιο πολύπλοκα σχήματα, τα λεγόμενα paths (μονοπά-
τια ή μονοκοντυλιές).
Τα paths αποτελούνται από επιμέρους ευθείες, τόξα και
καμπύλες και είναι μονοκοντυλιές.
Δηλαδή, έχουν την ιδιότητα το τελευταίο σημείο κάθε υπο-
σχήματος να είναι το πρώτο σημείο του επόμενου. Για παρά-
δειγμα, με τις παρακάτω γραμμές φτιάχνουμε ένα απλό συν-
νεφάκι:
context.beginPath();
context.moveTo(170, 80);
context.bezierCurveTo(130, 120, 130, 150, 230, 150);
context.bezierCurveTo(250, 180, 320, 180, 340, 150);
context.bezierCurveTo(420, 150, 420, 120, 390, 100);
context.bezierCurveTo(430, 40, 370, 30, 340, 50);
context.bezierCurveTo(320, 5, 250, 20, 250, 50);
context.bezierCurveTo(200, 5, 150, 20, 170, 80);
context.closePath();
context.stroke();
Τα paths μάς επιτρέπουν να τα γεμίσουμε. Αυτό γίνεται με
τη .fillStyle και τη .fill(). Η πρώτη ορίζει το χρώμα και η δεύτε-
ρη απλώς γεμίζει.
Οπότε, αν προσθέσουμε τις παρακάτω δύο γραμμές πριν
από τη .stroke() θα έχουμε ένα μπλε συννεφάκι, όπως στην
εικόνα 4
:
context.fillStyle = "#8ED6FF";
context.fill();
Και πώς γράφουμε κείμενο μέσα στον καμβά; Πολύ εύκολο
και αυτό. Υπάρχει η εντολή fillText(“text”, x1,y1), που γράφει
το κείμενο “text” στη θέση x1, y1 του καμβά. Επιπλέον, με τη
.font μπορούμε να ορίσουμε τη γραμματοσειρά του κειμένου
μας, αρκεί βέβαια να επιλέξουμε μία που θα υπάρχει στον
υπολογιστή του επισκέπτη της σελίδας μας. Για παράδειγμα,
στον υπολογιστή μου έχω μία γραμματοσειρά που λέγεται
PFLibera, οπότε μπορώ να δώσω τις εντολές:
context.font = "35pt PFLibera";
context.fillText("Γεια σου κόσμε!", 0, 200);
Οπότε τώρα ο καμβάς μου έχει και κείμενο
(εικόνα 5)
.
Τώρα που είδαμε τα βασικά, ας τα μαζέψω σε ένα συνολικό
παράδειγμα. Θα αλλάξω λίγο τον κώδικα του ημικυκλίου που εί-
δαμε πιο πριν (από την ακτίνα και κάτω) για να φτιάξω ένα υπο-
τυπώδες pacman με μαύρο περίγραμμα και κίτρινο χρώμα:
var r = 100;
var a1 = 0.1 * Math.PI;
var a2= 1 * Math.PI;
var a3= (8 * Math.PI) /4.3;
context.moveTo(x0, y0);
context.beginPath();
context.arc(x0, y0, r, a1, a2, false);
context.arc(x0, y0, r, a2, a3, false);
context.lineTo(x0, y0);
context.lineTo(490, 288);
context.fillStyle = "yellow";
context.fill();
context.moveTo(410, 190);
context.lineTo(425, 190);
context.stroke();
};
Το αποτέλεσμα φαίνεται στην
εικόνα 6
. Τέλος, στον
Πίνα-
κα 1
φαίνονται οι πιο βασικές εντολές του canvas και οι επε-
ξηγήσεις τους.
•
Linux Labs - HTML5
Πίνακας 1: Βασικές εντολές στο Canvas
ΓΡΑΜΜΕΣ
.lineTo(x,y)
Γραμμή έως το σημείο x, y
.lineWidth= Χ;
Το πλάτος της γραμμής
.strokeStyle= “χρώμα”;
Χρώμα γραμμής
.lineCap= “τιμή”;
Τέλειωμα γραμμής (butt, round, square)
ΚΑΜΠΥΛΕΣ
.arc(x0,y0, radius, a1,a2, antiClockwise);
Τόξο με κέντρο x0, yo. ακτίνα r, αρχή a1 και τέλος a2
.quadraticCurveTo(x1,y1, x2,y2);
Καμπύλη με σημείο ελέγχου x1, y1 και σημείο τερματισμού το x2, y2
.bezierCurveTo(x1, y1, x2, y2, x3, y3);
Καμπύλη με σημεία ελέγχου x1, y1 και x2, y2 και σημείο τερματισμού το x3, y3
ΜΟΝΟΠΑΤΙΑ
.beginPath();
Ορίζουμε μία μονοκοντυλιά, η οποία αποτελείται από ευθείες και καμπύλες.
.closePath();
Ολοκληρώνουμε τη μονοκοντυλιά
.lineJoin(τιμή);
Ορίζουμε το είδος της σύνδεσης των γραμμών (miter, round, bevel)
ΣΧΗΜΑΤΑ
.rect(x1,y1,w,h);
Ορθογώνιο με πάνω αριστερή γωνία x1, y1 και πλάτος w και ύψος h
.arc(x0, y0, r, 0, 2*Math.PI, false);
Κύκλος με κέντρο x0, y0 και ακτίνα r
ΚΕΙΜΕΝΟ
.font = "20pt Arial";
Καθορισμός γραμματοσειράς σε Arial
.fillText("Γειά!", x, y);
Γράφουμε τη φράση “Γεια!” στο σημείο x, y