Page 76 - Linux Inside τ. 8

Linux Inside

76

</head>

<body>

</canvas>

</body>

</html>

Ο παραπάνω κώδικας είναι μία απλή και κενή σελίδα

HTML. Απλώς προσθέσαμε στα scripts τις γραμμές ορισμού

του καμβά mycanvas και μετά τον υλοποιήσαμε μέσα στο

body της σελίδας. Ο καμβάς μας θα έχει πλάτος 800 pixels

και ύψος 500. Αν φορτώσετε τη σελίδα στον Firefox ή στον

Chrome, δεν θα δείτε τίποτε άλλο εκτός από μία επικεφαλίδα,

αφού δεν έχουμε σχεδιάσει τίποτε ακόμα. Πάμε στο σχεδια-

σμό, λοιπόν. Όπως είπαμε, για να σχεδιάσουμε κάτι, δουλεύ-

ουμε με το αντικείμενο context (ή όπως αλλιώς το ονομάσα-

τε) στην JavaScript. Έτσι, για να φτιάξουμε μία ευθεία γραμ-

μή, προσθέτουμε τις εντολές:

context.moveTo(x0,y0);

context.lineTo(x1,y1);

context.stroke();

Με την πρώτη μετακινούμε τον κέρσορα σε ένα σημείο (x0,

y0) του καμβά, με τη δεύτερη εντολή ορίζουμε μία ευθεία

γραμμή έως ένα δεύτερο σημείο (x1, y1) και με την τρίτη σχε-

διάζουμε τη γραμμή. Για παράδειγμα, για να σχεδιάσουμε τη

λέξη LiNUX αρκούν οι εντολές:

window.onload = function(){

var canvas = document.getElementById("myCanvas");

var context = canvas.getContext("2d");

context.moveTo(10,1);

context.lineTo(10,100);

context.lineTo(50,100);

context.moveTo(60,40);

context.lineTo(60,100);

context.moveTo(80,100);

context.lineTo(80,1);

context.lineTo(120,100);

context.lineTo(120,1);

context.moveTo(140,1);

context.lineTo(140,100);

context.lineTo(190,100);

context.lineTo(190,1);

context.moveTo(190,100);

context.lineTo(200,100);

context.moveTo(190,100);

context.lineTo(200,100);

context.moveTo(220,100);

context.lineTo(260,1);

context.moveTo(220,1);

context.lineTo(260,100);

context.stroke();

};

</script>

Αντικαταστήστε τον παραπάνω κώδικα στο <script>

</script> του Κώδικα 1 και φορτώστε ξανά τη σελίδα. Θα

δείτε την

εικόνα 2

. Για να αλλάξετε χρώμα στη γραφίδα,

υπάρχει η εντολή:

context.strokeStyle = "χρώμα";

To χρώμα το δίνετε είτε ολογράφως, π.χ.. red, είτε σε μορ-

φή RGB, δηλαδή rgba(150,75,0,0.9), όπου τα τρία πρώτα νού-

μερα είναι το κόκκινο, το πράσινο και το μπλε, ενώ το τελευ-

ταίο είναι ο βαθμός αδιαφάνειας. Για τις γραμμές υπάρχουν

επίσης οι χρήσιμες εντολές:

context.lineWidth = ΧΧ;

Π.χ., προσθέστε τις παρακάτω δύο γραμμές αμέσως μετά

την εντολή getContext(“2d”) και θα δείτε το αποτέλεσμα της

εικόνας 3

.

context.strokeStyle = "rgba(254,0,0,0.9)";

context.lineWidth = 13;

Καλό, έτσι; Πάμε παρακάτω! Για κύκλους και τόξα υπάρχει

η εντολή arc. Με το παρακάτω παράδειγμα φτιάχνουμε ένα

ημικύκλιο. Παρατηρήστε ότι δίνω το κέντρο (x0, y0), την ακτί-

να r και τις γωνίες εκκίνησης και τερματισμού σε ξεχωριστές

μεταβλητές, τις οποίες ορίζω με την εντολή var:

window.onload = function(){

var canvas = document.getElementById("myCanvas");

var context = canvas.getContext("2d");

context.lineWidth = 15;

context.strokeStyle = "red";

var x0 = canvas.width / 2;

var y0 = canvas.height / 2;

var r = 50;

var a1 = 1 * Math.PI;

var a2= 2 * Math.PI;

context.arc(x0, y0, r, a1, a2, false);

context.stroke();

};

Να δούμε και μερικές καμπύλες; Το canvas προσφέρει κα-

μπύλες δευτέρου βαθμού (quadratic) ή τρίτου βαθμού (be-

zier). Για τις πρώτες χρειαζόμαστε μόνο το σημείο τερματι-

σμού και ένα σημείο ελέγχου, ενώ οι δεύτερες θέλουν δύο

σημεία ελέγχου και ένα σημείο τερματισμού.

Παραδείγματα:

context.quadraticCurveTo(400, 500, 500, 400);

context.moveTo(10, 1);

Linux Labs - HTML5

Τα paths αποτελούνται από επιμέρους ευθείες,

τόξα και καμπύλες και είναι μονοκοντυλιές.

Δηλαδή, έχουν την ιδιότητα το τελευταίο σημείο

κάθε υποσχήματος να είναι το πρώτο σημείο του

επόμενου.

Ένα ολοκληρωμένο σχέδιο. Το PacMan του «Linux

Inside»!

6