Μια περιοχή canvas μπορεί να εμφανίσει διάφορα γραφικά σε μια σελίδα, όπως απλά διαγράμματα, εντυπωσιακά interfaces, κινούμενα γραφικά, γραφικές παραστάσεις και εξωτερικές εικόνες.
Η περιοχή canvas είναι μια ορθογώνια περιοχή. Η σχεδίαση γραφικών μέσα σε αυτήν γίνεται με την τεχνική pixel-based drawing API, δηλαδή η σχεδίαση των γραφικών γίνεται ορίζοντας σημεία μέσα στην περιοχή. Ακούγεται απλό και χωρίς πολλές δυνατότητες, αλλά αν χρησιμοποιηθεί σωστά και έξυπνα η JavaScript, με την οποία σχεδιάζουμε γραφικά στην περιοχή canvas, μπορούμε να δημιουργήσουμε πολύ ωραία πραγματάκια.
Η περιοχή canvas είναι μια ορθογώνια περιοχή. Η σχεδίαση γραφικών μέσα σε αυτήν γίνεται με την τεχνική pixel-based drawing API, δηλαδή η σχεδίαση των γραφικών γίνεται ορίζοντας σημεία μέσα στην περιοχή. Ακούγεται απλό και χωρίς πολλές δυνατότητες, αλλά αν χρησιμοποιηθεί σωστά και έξυπνα η JavaScript, με την οποία σχεδιάζουμε γραφικά στην περιοχή canvas, μπορούμε να δημιουργήσουμε πολύ ωραία πραγματάκια.
Δημιουργία περιοχής canvas στην σελίδα μας
Με την ετικέτα <canvas> ορίζουμε μια περιοχή στην σελίδα μας. Ο παρακάτω κώδικας προσθέτει μια περιοχή με id 'topcanvas' και διαστάσεις 300x80
Η ετικέτα canvas
<canvas id="topcanvas" width="300" height="80"></canvas>
Σχεδίαση γραφικών στην περιοχή canvas
Η ετικέτα <canvas> δεν έχει από μόνη της σχεδιαστικές δυνατότητες. Η σχεδίαση γραφικών μέσα στην περιοχή γίνεται με την βοήθεια της γλώσσας JavaScript. Ο κώδικας JavaScript τοποθετείται μέσα σε μια function η οποία είναι γραμμένη όπως παρακάτω, έτσι ώστε να "τρέχει" κάθε φορά που φορτώνει η σελίδα :
Ο κώδικας που σχεδιάζει γραφικά σε μια περιοχή είναι κάπως έτσι:
var drawingCanvas = document.getElementById("topcanva");
Στην πρώτη γραμμή του κώδικα της function καθορίζεται η περιοχή canvas στην οποία θα σχεδιαστούν γραφικά, βάζοντας σε εισαγωγικά το id της ετικέτας <canvas>
var context = drawingCanvas.getContext("2d");
Στην δεύτερη γραμμή της function δημιουργείται ένα αντικείμενο getContext("2d") το οποίο είναι μέρος της HTML5 και το οποίο έχει πολλούς μεθόδους για την σχεδίαση γραφικών (με τους όρους αντικείμενο και μέθοδο, εννοώ τους όρους που χρησιμοποιούμε όταν μιλάμε για αντικειμενοστραφής γλώσσες προγραμματισμού όπως είναι η Java και η C++).
context.fillStyle="#FF0000";
context.fillRect(0,0,150,75);
Οι δύο επόμενες γραμμές ορίζουν ένα κόκκινο (#FF0000) ορθογώνιο με διαστάσεις 150x75. Η μέθοδος fillStyle ορίζει χρώμα στο γραφικό, ενώ η μέθοδος fillRect οριζει τις συντεταγμένες ενός ορθογωνίου επάνω στην περιοχή canvas. Στην προκειμένη περίπτωση δημιουργεί ένα ορθογώνιο το οποίο η επάνω αριστερή του γωνία θα είναι στο σημείο 0,0 της περιοχής canvas και θα έχει μήκος 150 pixels και ύψος 75 pixels.
Ολόκληρος ο κώδικας:
Τρόπος σύνταξης του κώδικα Javascript ο οποίος σχεδιάζει γραφικά στην περιοχή cnavas
<script type="text/javascript">
window.onload = function() {
// edw mpainei o kwdikas pou sxediazei grafika sthn perioxh
}
</script>
window.onload = function() {
// edw mpainei o kwdikas pou sxediazei grafika sthn perioxh
}
</script>
<script type="text/javascript">
window.onload = function() {
var drawingCanvas = document.getElementById("topcanvas");
var context = drawingCanvas.getContext("2d");
context.fillStyle="#FF0000";
context.fillRect(0,0,150,75);
}
</script>
window.onload = function() {
var drawingCanvas = document.getElementById("topcanvas");
var context = drawingCanvas.getContext("2d");
context.fillStyle="#FF0000";
context.fillRect(0,0,150,75);
}
</script>
Στην πρώτη γραμμή του κώδικα της function καθορίζεται η περιοχή canvas στην οποία θα σχεδιαστούν γραφικά, βάζοντας σε εισαγωγικά το id της ετικέτας <canvas>
var context = drawingCanvas.getContext("2d");
Στην δεύτερη γραμμή της function δημιουργείται ένα αντικείμενο getContext("2d") το οποίο είναι μέρος της HTML5 και το οποίο έχει πολλούς μεθόδους για την σχεδίαση γραφικών (με τους όρους αντικείμενο και μέθοδο, εννοώ τους όρους που χρησιμοποιούμε όταν μιλάμε για αντικειμενοστραφής γλώσσες προγραμματισμού όπως είναι η Java και η C++).
context.fillStyle="#FF0000";
context.fillRect(0,0,150,75);
Οι δύο επόμενες γραμμές ορίζουν ένα κόκκινο (#FF0000) ορθογώνιο με διαστάσεις 150x75. Η μέθοδος fillStyle ορίζει χρώμα στο γραφικό, ενώ η μέθοδος fillRect οριζει τις συντεταγμένες ενός ορθογωνίου επάνω στην περιοχή canvas. Στην προκειμένη περίπτωση δημιουργεί ένα ορθογώνιο το οποίο η επάνω αριστερή του γωνία θα είναι στο σημείο 0,0 της περιοχής canvas και θα έχει μήκος 150 pixels και ύψος 75 pixels.
Ολόκληρος ο κώδικας:
Σχεδίαση ορθογωνίου στην περιοχή canvas
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
window.onload = function() {
var drawingCanvas = document.getElementById("topcanvas");
var context = drawingCanvas.getContext("2d");
context.fillStyle="#FF0000";
context.fillRect(0,0,150,75);
}
</script>
</head>
<body>
<canvas id="topcanvas" width="300" height="80"></canvas>
</body>
</html>
<html>
<head>
<script type="text/javascript">
window.onload = function() {
var drawingCanvas = document.getElementById("topcanvas");
var context = drawingCanvas.getContext("2d");
context.fillStyle="#FF0000";
context.fillRect(0,0,150,75);
}
</script>
</head>
<body>
<canvas id="topcanvas" width="300" height="80"></canvas>
</body>
</html>
Περισσότερα για τις συντεταγμένες μιας περιοχής
Σχεδιάζουμε γραφικά σε μια περιοχή χρησιμοποιώντας τις συντεταγμένες x και y της περιοχής αυτής.
Δεξιά, στην παραπάνω εικόνα, βλέπουμε μια περιοχή με πραγματικές διαστάσεις 150x90 pixels, ενώ αριστερά βλέπουμε την ίδια περιοχή σε μεγέθυνση και πλέγμα ώστε να είναι εμφανές οι γραμμές x και y της περιοχής. Ένα σημείο στην περιοχή ορίζεται με τον συνδυασμό τιμών x και y, για παράδειγμα 15,57. Το σημείο 0,0 βρίσκεται επάνω αριστερά της περιοχής, ενώ το σημείο 150,90 βρίσκεται κάτω δεξιά.
Δεξιά, στην παραπάνω εικόνα, βλέπουμε μια περιοχή με πραγματικές διαστάσεις 150x90 pixels, ενώ αριστερά βλέπουμε την ίδια περιοχή σε μεγέθυνση και πλέγμα ώστε να είναι εμφανές οι γραμμές x και y της περιοχής. Ένα σημείο στην περιοχή ορίζεται με τον συνδυασμό τιμών x και y, για παράδειγμα 15,57. Το σημείο 0,0 βρίσκεται επάνω αριστερά της περιοχής, ενώ το σημείο 150,90 βρίσκεται κάτω δεξιά.
Διαθέσιμα σχήματα, εφέ και μεταμορφώσεις
Το αντικείμενο drawingCanvas
var context = drawingCanvas.getContext("2d");
Διαθέσιμα σχήματα
- γραμμές (line drawing)
- ορθογώνιο (rectangle)
- τμήμα κύκλου ή αλλιώς τόξο (arc)
- καμπύλες (bezier και quadratic curves)
- σύνθετα σχήματα (paths)
Εφέ
- γέμισμα (fill)
- περίγραμμα (stroke)
- σκιά (shadow)
- γραμμική ή ακτινωτή κλήση (linear και radial gradients)
- διαφάνεια (alpha transparency)
- σύνθετος συνδυασμός γραφικών (image compositing)
Μεταμορφώσεις
- περιστροφή (rotation)
- κλιμάκωση (scale)
- translation
Παραδείγματα σχεδίασης σε μια περιοχή
Γραμμές
Ο παρακάτω JavaScript κώδικας σχεδιάζει 3 γραμμές στην περιοχή canvas με id oCanvasMou
Η μέθοδος moveTo() δημιουργεί ένα αρχικό σημείο.
Η μέθοδος lineTo() ενώνει με μια ευθεία γραμμή το αρχικό σημείο που ορίζει η moveTo() με το σημείο που έχει στην παρένθεση της.
Η μέθοδος stoke() σχεδιάζει τις γραμμές.
Γεωμετρικά τόξα και κύκλοι
Ο παρακάτω κώδικας προσθέτει δύο κύκλους στην περιοχή canvas με id oCanvasMou:
Η μέθοδο fillStyle() ορίζει το χρώμα του γεμίσματος ενός σχήματος.
Η beginPath() και closePath() αρχίζουν και τελειώνουν την σχεδίαση ενός σύνθετου σχήματος (path).
Η fill() γεμίζει ένα σχήμα με το χρώμα που ορίσαμε στην fillStyle()
Η μέθοδος arc(x, y, radius, startAngle, endAngle, anticlockwise), δημιουργεί ένα τμήμα κύκλου. Επεξήγηση παραμέτρων:
x,y: συντεταγμένες που δείχνουν το σημείο του κέντρου του κύκλου μέσα στην περιοχή
radius: η ακτίνα του κύκλου.
startAngle: αρχική γωνία (μοίρες). Για να σχηματίσουμε τέλειο κύκλο θα πρέπει να θέσουμε την τιμή 0
endAngle: τελική γωνία (μοίρες). Για να σχηματίσουμε τέλειο κύκλο θα πρέπει να θέσουμε την τιμή Math.PI*2. Το Math.PI είναι η τιμή π (3,14...)
anticlockwise: θέτουμε true ή false όταν θέλουμε να σχηματίσουμε το τόξο με την αντίθετη ή την κανονική φορά του ρολογιού. Όταν σχηματίζουμε τέλειο κύκλο, όποια από τις δύο τιμές και να βάλουμε είναι το ίδιο, αφού η αρχική και η τελική γωνία συμπίπτουν.
Linear gradient background εφέ
Ένα gradient background εφέ ξεκινάει με ένα συγκεκριμένο χρώμα και σβήνει κλιμακωτά σε ένα άλλο χρώμα. Το παρακάτω ορθογώνιο ξεκινάει με το χρώμα #3366FF και σβήνει με το χρώμα #AFDEF8
Ο παρακάτω κώδικας σχεδιάζει το παραπάνω ορθογώνιο στην περιοχή με id oCanvasMou:
var grd=cxt.createLinearGradient(0,0,165,40);
Με την παραπάνω γραμμή σχηματίζουμε την περιοχή του σχήματος που θα εφαρμοστεί το Linear gradient εφε. Η περιοχή είναι ορθογώνια και ορίζεται από δύο σημεία, το σημείο 0,0 και το σημείο 165,40
grd.addColorStop(0,"#3366FF");
grd.addColorStop(1,"#00FF00");
Οι γραμμές αυτές ορίζουν τα δύο χρώματα του εφέ. Η τιμή 0 στην πρώτη παράμετρο της μεθόδου addColorStop ορίζει το χρώμα με το οποίο θα ξεκινάει το gradient εφε, ενώ η τιμή 1 ορίζει το χρώμα στο οποίο θα σβύνει.
cxt.fillStyle=grd;
Ορίζουμε το γέμισμα ενός σχήματος. Η τιμή grd περιέχει το gradient εφέ που ορίσμαε πιο πάνω στον κώδικα.
cxt.fillRect(10,10,175,50);
Σχηματίζει ένα ορθογώνιο
Το εφέ της σκιάς
Ο παρακάτω κώδικας σχεδιάζει ένα ορθογώνιο με linear gradient εφέ, όπως ακριβώς το παραπάνω, αλλά με σκιά:
cxt.shadowOffsetX = 10;
cxt.shadowOffsetY = 10;
Οι παραπάνω τιμές ορίζουν την θέση της σκιάς σε σχέση με το σχήμα. Η παραπάνω σκιά θα τοποθετηθεί 10 pixels δεξιά του σχήματος (shadowOffsetX) και 10 pixels κάτω από το σχήμα (shadowOffsetX). Οι τιμές μπορεί να είναι και αρνητικές. Έτσι αν ορίσουμε -10 στο shadowOffsetX, τότε η σκιά θα εκτίνεται 10 pixels αριστερά του σχήματος
cxt.shadowBlur = 40;
Ορίζει την θολότητα της σκιάς. Όσο μεγαλύτερη είναι η τιμή, τόσο μεγαλώνει η θολότητα της σκιάς
cxt.shadowColor = "black";
Ορίζει το χρώμα της σκιάς
Περιστροφή ενός σχήματος
Η μέθοδος rotate(αριθμός) περιστρέφει σχήματα. Ο αριθμός μέσα στην παρένθεση μπορεί να είναι και αρνητική τιμή για πετύχουμε την περιστροφή του σχήματος αντίθετα με την φορά των δεικτών του ρολογιού
Ο παρακάτω JavaScript κώδικας σχεδιάζει 3 γραμμές στην περιοχή canvas με id oCanvasMou
Σχεδιασμός τριών γραμμών στην περιοχή canvas
<script type="text/javascript">
var drawingCanvas =document.getElementById("oCanvasMou");
var cxt= drawingCanvas.getContext("2d");
// prwth grammh
cxt.moveTo(10,10);
cxt.lineTo(150,50);
// deuterh grammh
cxt.moveTo(5,60);
cxt.lineTo(200,60);
// trith grammh
cxt.moveTo(180,5);
cxt.lineTo(180,90);
cxt.stroke();
</script>
var drawingCanvas =document.getElementById("oCanvasMou");
var cxt= drawingCanvas.getContext("2d");
// prwth grammh
cxt.moveTo(10,10);
cxt.lineTo(150,50);
// deuterh grammh
cxt.moveTo(5,60);
cxt.lineTo(200,60);
// trith grammh
cxt.moveTo(180,5);
cxt.lineTo(180,90);
cxt.stroke();
</script>
Η μέθοδος lineTo() ενώνει με μια ευθεία γραμμή το αρχικό σημείο που ορίζει η moveTo() με το σημείο που έχει στην παρένθεση της.
Η μέθοδος stoke() σχεδιάζει τις γραμμές.
Γεωμετρικά τόξα και κύκλοι
Ο παρακάτω κώδικας προσθέτει δύο κύκλους στην περιοχή canvas με id oCanvasMou:
Σχεδιασμός δύο κύκλων
<script type="text/javascript">
var c=document.getElementById("oCanvasMou");
var cxt=c.getContext("2d");
// Kokkinos kuklos
cxt.fillStyle="#FF0000";
cxt.beginPath();
cxt.arc(70,25,20,0,Math.PI*2,false);
cxt.closePath();
cxt.fill();
// Prasinos kuklos
cxt.fillStyle="#00FF00";
cxt.beginPath();
cxt.arc(110,40,15,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();
</script>
var c=document.getElementById("oCanvasMou");
var cxt=c.getContext("2d");
// Kokkinos kuklos
cxt.fillStyle="#FF0000";
cxt.beginPath();
cxt.arc(70,25,20,0,Math.PI*2,false);
cxt.closePath();
cxt.fill();
// Prasinos kuklos
cxt.fillStyle="#00FF00";
cxt.beginPath();
cxt.arc(110,40,15,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();
</script>
Η μέθοδο fillStyle() ορίζει το χρώμα του γεμίσματος ενός σχήματος.
Η beginPath() και closePath() αρχίζουν και τελειώνουν την σχεδίαση ενός σύνθετου σχήματος (path).
Η fill() γεμίζει ένα σχήμα με το χρώμα που ορίσαμε στην fillStyle()
Η μέθοδος arc(x, y, radius, startAngle, endAngle, anticlockwise), δημιουργεί ένα τμήμα κύκλου. Επεξήγηση παραμέτρων:
x,y: συντεταγμένες που δείχνουν το σημείο του κέντρου του κύκλου μέσα στην περιοχή
radius: η ακτίνα του κύκλου.
startAngle: αρχική γωνία (μοίρες). Για να σχηματίσουμε τέλειο κύκλο θα πρέπει να θέσουμε την τιμή 0
endAngle: τελική γωνία (μοίρες). Για να σχηματίσουμε τέλειο κύκλο θα πρέπει να θέσουμε την τιμή Math.PI*2. Το Math.PI είναι η τιμή π (3,14...)
anticlockwise: θέτουμε true ή false όταν θέλουμε να σχηματίσουμε το τόξο με την αντίθετη ή την κανονική φορά του ρολογιού. Όταν σχηματίζουμε τέλειο κύκλο, όποια από τις δύο τιμές και να βάλουμε είναι το ίδιο, αφού η αρχική και η τελική γωνία συμπίπτουν.
Linear gradient background εφέ
Ένα gradient background εφέ ξεκινάει με ένα συγκεκριμένο χρώμα και σβήνει κλιμακωτά σε ένα άλλο χρώμα. Το παρακάτω ορθογώνιο ξεκινάει με το χρώμα #3366FF και σβήνει με το χρώμα #AFDEF8
Ο παρακάτω κώδικας σχεδιάζει το παραπάνω ορθογώνιο στην περιοχή με id oCanvasMou:
Σχεδιασμός ορθογωνίου με gardient background εφέ
<script type="text/javascript">
var c=document.getElementById("oCanvasMou ");
var cxt=c.getContext("2d");
var grd=cxt.createLinearGradient(0,0,165,50);
grd.addColorStop(0," #3366FF ");
grd.addColorStop(1," #AFDEF8");
cxt.fillStyle=grd;
cxt.fillRect(10,10,175,50);
var c=document.getElementById("oCanvasMou ");
var cxt=c.getContext("2d");
var grd=cxt.createLinearGradient(0,0,165,50);
grd.addColorStop(0," #3366FF ");
grd.addColorStop(1," #AFDEF8");
cxt.fillStyle=grd;
cxt.fillRect(10,10,175,50);
Με την παραπάνω γραμμή σχηματίζουμε την περιοχή του σχήματος που θα εφαρμοστεί το Linear gradient εφε. Η περιοχή είναι ορθογώνια και ορίζεται από δύο σημεία, το σημείο 0,0 και το σημείο 165,40
grd.addColorStop(0,"#3366FF");
grd.addColorStop(1,"#00FF00");
Οι γραμμές αυτές ορίζουν τα δύο χρώματα του εφέ. Η τιμή 0 στην πρώτη παράμετρο της μεθόδου addColorStop ορίζει το χρώμα με το οποίο θα ξεκινάει το gradient εφε, ενώ η τιμή 1 ορίζει το χρώμα στο οποίο θα σβύνει.
cxt.fillStyle=grd;
Ορίζουμε το γέμισμα ενός σχήματος. Η τιμή grd περιέχει το gradient εφέ που ορίσμαε πιο πάνω στον κώδικα.
cxt.fillRect(10,10,175,50);
Σχηματίζει ένα ορθογώνιο
Το εφέ της σκιάς
Ο παρακάτω κώδικας σχεδιάζει ένα ορθογώνιο με linear gradient εφέ, όπως ακριβώς το παραπάνω, αλλά με σκιά:
Σχεδιασμός ορθογωνίου με gardient background και σκιά
<script type="text/javascript">
var c=document.getElementById("oCanvasMou");
var cxt=c.getContext("2d");
var grd=cxt.createLinearGradient(0,0,175,50);
grd.addColorStop(0," #3366FF ");
grd.addColorStop(1," #AFDEF8");
cxt.fillStyle=grd;
// to efe ths skias
cxt.shadowOffsetX = 10;
cxt.shadowOffsetY = 10;
cxt.shadowBlur = 40;
cxt.shadowColor = "black";
cxt.fillRect(10,10,175,50);
var c=document.getElementById("oCanvasMou");
var cxt=c.getContext("2d");
var grd=cxt.createLinearGradient(0,0,175,50);
grd.addColorStop(0," #3366FF ");
grd.addColorStop(1," #AFDEF8");
cxt.fillStyle=grd;
// to efe ths skias
cxt.shadowOffsetX = 10;
cxt.shadowOffsetY = 10;
cxt.shadowBlur = 40;
cxt.shadowColor = "black";
cxt.fillRect(10,10,175,50);
cxt.shadowOffsetY = 10;
Οι παραπάνω τιμές ορίζουν την θέση της σκιάς σε σχέση με το σχήμα. Η παραπάνω σκιά θα τοποθετηθεί 10 pixels δεξιά του σχήματος (shadowOffsetX) και 10 pixels κάτω από το σχήμα (shadowOffsetX). Οι τιμές μπορεί να είναι και αρνητικές. Έτσι αν ορίσουμε -10 στο shadowOffsetX, τότε η σκιά θα εκτίνεται 10 pixels αριστερά του σχήματος
cxt.shadowBlur = 40;
Ορίζει την θολότητα της σκιάς. Όσο μεγαλύτερη είναι η τιμή, τόσο μεγαλώνει η θολότητα της σκιάς
cxt.shadowColor = "black";
Ορίζει το χρώμα της σκιάς
Περιστροφή ενός σχήματος
Η μέθοδος rotate(αριθμός) περιστρέφει σχήματα. Ο αριθμός μέσα στην παρένθεση μπορεί να είναι και αρνητική τιμή για πετύχουμε την περιστροφή του σχήματος αντίθετα με την φορά των δεικτών του ρολογιού
Έλεγχος αν ο browser υποστηρίζει την σχεδίαση σε περιοχή canvas
Καλό είναι, όταν σχεδιάζουμε γραφικά σε μια περιοχή canvas, να προσθέτουμε τον παρακάτω κώδικα ο οποίος ελέγχει αν ο browser υποστηρίζει την συγκεκριμένη δυνατότητα της HTML5:
Ο πιο σωστός τρόπος για να γράψουμε τον κώδικα του παραδείγματος που παρουσιάστηκε πιο πάνω σε αυτήν την σελίδα, είναι ο παρακάτω:
var drawingCanvas = document.getElementById('myDrawing');
if(drawingCanvas.getContext) {
var cxt = drawingCanvas.getContext('2d');
// Edw grafetai o kwdikas pout ha sxhmatisei grafika sthn perioxi
}
else {
// Edw grafoume ton kwdika pou ha ekteleitai otan o browser den ipostirizei html5
}
if(drawingCanvas.getContext) {
var cxt = drawingCanvas.getContext('2d');
// Edw grafetai o kwdikas pout ha sxhmatisei grafika sthn perioxi
}
else {
// Edw grafoume ton kwdika pou ha ekteleitai otan o browser den ipostirizei html5
}
<!DOCTYPE HTML>
<html>
<head>
<title>Canvas test</title>
<script type="text/javascript">
window.onload = function() {
var drawingCanvas = document.getElementById("topcanvas");
if (topcanvas.getContext) {
var context = drawingCanvas.getContext("2d");
context.fillStyle="#FF0000";
context.fillRect(0,0,150,75);
}
else
{ alert("Ο broser σας δεν υποστηρίζει το αντικείμενο getComtext της HTML5");
}
}
</script>
</head>
<body>
<canvas id="topcanvas" width="200" height="200">
<p>Your browser doesn't support canvas.</p>
</canvas>
</body>
<html>
<head>
<title>Canvas test</title>
<script type="text/javascript">
window.onload = function() {
var drawingCanvas = document.getElementById("topcanvas");
if (topcanvas.getContext) {
var context = drawingCanvas.getContext("2d");
context.fillStyle="#FF0000";
context.fillRect(0,0,150,75);
}
else
{ alert("Ο broser σας δεν υποστηρίζει το αντικείμενο getComtext της HTML5");
}
}
</script>
</head>
<body>
<canvas id="topcanvas" width="200" height="200">
<p>Your browser doesn't support canvas.</p>
</canvas>
</body>
Αλλες Ιστοσελίδες
Υπάρχουν πάρα πολλές δυνατότητες σχεδίασης γραφικών σε μια περιοχή canvas η οποίες δεν μπορούν να αναπτυχθούν σε μια μόνο ενότητα. Ίσως κατά διαστήματα να προσθέτω κι' άλλα παραδείγματα, όπως τα προηγούμενα. Για όσους θέλουν να μάθουν περισσότερα, καλό είναι να επισκεφτούν τα παρακάτω links που παρουσιάζουν tutorials γι' αυτό το θέμα.
Tutorials
- http://dev.w3.org/html5/canvas-api/canvas-2d-api.html
Σε αυτή την σελίδα της w3.org θα βρείτε όλο το specification του Canvas 2D API.
- http://thinkvitamin.com/code/how-to-draw-with-html-5-canvas
Πολύ καλό tutorial με αρκετά παραδείγματα
- http://dev.opera.com/articles/view/html5-canvas-painting
Στην σελίδα αυτή της Opera (η εταιρία που ανέπτυξε το opera browser), θα βρείτε πολύ ωραία και extreme παραδείγματα
Βίντεο tutorials:
- http://www.youtube.com/watch?v=acHxOpkgJXg
- http://www.youtube.com/watch?v=oOeeEAO8Flo
- http://www.youtube.com/watch?v=FaEfNvrouBk
- http://www.youtube.com/watch?v=00bTqPr2CFM
Σε αυτό το βίντεο παρουσιάζεται ένα εξαιρετικά extreme παράδειγμα που σχεδιάστηκε με HTML5/canvas. Παράδειγμα που σε κάνει να λες... Die flash, die!!!
Tutorials
- http://dev.w3.org/html5/canvas-api/canvas-2d-api.html
Σε αυτή την σελίδα της w3.org θα βρείτε όλο το specification του Canvas 2D API.
- http://thinkvitamin.com/code/how-to-draw-with-html-5-canvas
Πολύ καλό tutorial με αρκετά παραδείγματα
- http://dev.opera.com/articles/view/html5-canvas-painting
Στην σελίδα αυτή της Opera (η εταιρία που ανέπτυξε το opera browser), θα βρείτε πολύ ωραία και extreme παραδείγματα
Βίντεο tutorials:
- http://www.youtube.com/watch?v=acHxOpkgJXg
- http://www.youtube.com/watch?v=oOeeEAO8Flo
- http://www.youtube.com/watch?v=FaEfNvrouBk
- http://www.youtube.com/watch?v=00bTqPr2CFM
Σε αυτό το βίντεο παρουσιάζεται ένα εξαιρετικά extreme παράδειγμα που σχεδιάστηκε με HTML5/canvas. Παράδειγμα που σε κάνει να λες... Die flash, die!!!
