Basic HTML Version
Linux Inside
75
Εδώ, ο Explorer θα παίξει κατευθείαν το robot.mp4, ενώ οι
υπόλοιποι browsers θα «προτιμήσουν» τα άλλα ανοικτά for-
mats.
Γραφικά σε καμβά
Μία από τις πιο πολυδιαφημισμένες καινοτομίες της HTML5
είναι ο καμβάς σχεδίασης, που υλοποιείται μέσω της νέας ετι-
κέτας <canvas>. Με αυτό το tag, η HTML δεν περιορίζεται
πλέον στην προβολή κειμένου και bitmap γραφικών. Με το
canvas μπορούμε να σχεδιάσουμε ευθείες και καμπύλες με
λίγη JavaScript σε πραγματικό χρόνο χωρίς να επιβαρύνουμε
τον server, αλλά και να εφαρμόσουμε εφέ σε εικόνες. Ειδικό-
τερα, με το canvas tag μπορούμε να σχεδιάσουμε γραμμές,
ελλείψεις, τετράγωνα, καθώς και τις γνωστές καμπύλες
Bezier. Επί του παρόντος, δεν υπάρχει κάποια μέθοδος για να
γεμίζουμε σχήματα, αλλά υπάρχουν τόσο ντεγκραντέ όσο και
σκιάσεις. Μάλιστα, ο καμβάς μπορεί να περιστραφεί, να κά-
νουμε ζουμ και τον μετακινήσουμε. Για να ξεκινήσει κάποιος
έναν νέο καμβά, πρέπει να προσθέσει τις εξής γραμμές στα
script του στην αρχή του κώδικα της ιστοσελίδας:
var canvas = document.getElementById(“myCanvas”);
var context = canvas.getContext('2d');
Ουσιαστικά, με την πρώτη γραμμή φτιάχνουμε έναν νέο
καμβά με όνομα “mycanvas”, ενώ με τη δεύτερη –χρησιμο-
ποιώντας τη μέθοδο getContex– δημιουργούμε ένα αντικείμε-
νο της JavaScript, το context (ονομάστε το όπως θέλετε!), το
οποίο είναι επίπεδο με δύο διαστάσεις. Αυτό το αντικείμενο
περιέχει όλες τις μεθόδους που χρειαζόμαστε για να σχεδιά-
σουμε σχήματα και με αυτό το αντικείμενο θα δουλέψουμε
στον καμβά. Τώρα που ο καμβάς έχει γίνει ένα απλό αντικεί-
μενο της JavaScript, μπορούμε να φτιάξουμε κυριολεκτικά...
τα πάντα! Η σχεδίαση γίνεται σε επίπεδο JavaScript και η εμ-
φάνιση γίνεται μέσα στο «σώμα» της HTML. Αρκεί βέβαια να
εμφανίσουμε τον καμβά στο σημείο της HTML όπου επιθυ-
μούμε. Με λίγα λόγια, η «ραχοκοκαλιά» του κώδικα HTML
στον οποίο βασιζόμαστε, είναι:
ΚΩΔΙΚΑΣ 1: ΒΑΣΙΚΟ ΑΡΧΕΙΟ HTML ΜΕ CANVAS
<!DOCTYPE HTML>
<html>
<head>
<title>HTML5 TEST PAGE</title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<style></style>
<script>
window.onload = function(){
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
// Εδώ σχεδιάζουμε
};
</script>
Linux Labs - HTML5
Το πρώτο σχέδιό μας στο canvas. Απλό, αλλά αγαπημένο!
2
Το LiNUX μας απέκτησε χρώμα και ένταση.
3
Ένα όμορφο συννεφάκι με καμπύλες Bezier και ανάλογο
χρώμα.
4
Το canvas επιτρέπει να γράψουμε κείμενο με τη δική μας
γραμματοσειρά.
5