ΚΕΝΤΡΟ ΠΛΗ.ΝΕ.Τ. Ν. ΦΛΩΡΙΝΑΣ

Η Τεχνολογία HTML Canvas

Tutorial για το HTML Canvas

Το στοιχείο <canvas> της HTML χρησιμοποιείται για να μπορούμε να σχεδιάσουμε γραφικά σε μια ιστοσελίδα.

Το παραπάνω γραφικό έχει δημιουργηθεί με το tag <canvas>. Εμφανίζει τέσσερα στοιχεία : ένα κόκκινο ορθογώνιο, ένα βαθμωτό (gradient) ορθογώνιο, ένα πολύχρωμο ορθογώνιο και ένα πολύχρωμο κείμενο.

 

Τι Είναι το HTML Canvas

Το tag <canvas> της HTML χρησιμοποιείται για τον σχεδιασμό γραφικών στο αέρα (on the fly), με τη βοήθεια κώδικα (scripting), που είναι συνήθως η JavaScript. Το tag αυτό είναι απλά ένα container για τα γραφικά και πρέπει να χρησιμοποιήσουμε ένα script για να δημιουργηθεί το γραφικό. Η τεχνολογία canvas διαθέτει πολλές μεθόδους (συναρτήσεις) για τον σχεδιασμό διαδρομών (paths), κουτιών (boxes), κύκλων (circles), κειμένου (text) καθώς και για την προσθήκη εικόνων (images).

 

            Όλοι οι φυλλομετρητές (browsers) υποστηρίζουν την τεχνολογία canvas, αλλά καλύτερη υποστήριξη παρέχουν ο Internet Explorer και ο Opera.

 

            Μια συνοπτική περιγραφή των δυνατοτήτων της τεχνολογίας Canvas :

·  Το Canvas μπορεί να σχεδιάσει πολύχρωμο κείμενο, με ή χωρίς κίνηση (animation).

·  Το Canvas διαθέτει σπουδαίες δυνατότητες για σχεδίαση γραφικών, με πολλά γραφήματα και διαγράμματα (charts).

·  Τα αντικείμενα του Canvas μπορούν να μετακινούνται, από μια απλή αναπήδηση μπάλας μέχρι και πολύπλοκα animations.

·  Το Canvas είναι διαδραστικό (interactive) και μπορεί να ανταποκριθεί σε συμβάντα (events) της JavaScript αλλά και σε ενέργειες του χρήστη, όπως κλικ από το πληκτρολόγιο, κλικ του ποντικιού κ.ά.

·  Το Canvas μπορεί να χρησιμοποιηθεί σε παιχνίδια (games).

 

 

Παράδειγμα σε Canvas

Στην HTML, ένα στοιχείο <canvas> φαίνεται κάπως έτσι :

<canvas id="myCanvas" width="200" height="100">

</canvas>

 

Το στοιχείο (tag) <canvas> θα πρέπει να έχει ένα αναγνωριστικό (id attribute), ώστε να μπορούμε να αναφερόμαστε σ’ αυτό από την JavaScript. Οι ιδιότητες (χαρακτηριστικά, attributes) width και height είναι απαραίτητα για να μπορούμε να ορίσουμε το μέγεθος (size) του canvas.

 

            Φυσικά, μπορούμε να έχουμε πολλά στοιχεία <canvas> σε μια HTML σελίδα. Εξ ορισμού, το στοιχείο <canvas> δεν έχει καθόλου περιθώριο (border) και καθόλου περιεχόμενο (content). Για να προσθέσουμε border, πρέπει να χρησιμοποιήσουμε ένα το χαρακτηριστικό (attribute) style :

 

Παράδειγμα

<!DOCTYPE html>

<html>

<body>

<canvas id="myCanvas" width="200" height="100"

style="border:1px solid #000000;">

</canvas>

</body>

</html>

            Ο παραπάνω HTML κώδικας θα εμφανίσει ένα ορθογώνιο.

 

Σχεδίαση σε Canvas με JavaScript

Όλη η σχεδίαση σ’ ένα HTML canvas πρέπει να γίνει με κώδικα JavaScript :

 

Παράδειγμα

<!DOCTYPE html>

<html>

<body>

<canvas id="myCanvas" width="200" height="100"

style="border:1px solid #c3c3c3;">

Your browser does not support the canvas element.

</canvas>

<script>

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

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

ctx.fillStyle = "#FF0000";

ctx.fillRect(0, 0, 150, 75);

</script>

</body>

</html>

            Ο παραπάνω HTML κώδικας θα εμφανίσει ένα ορθογώνιο με κόκκινο περίγραμμα και με ενσωματωμένο ένα άλλο κόκκινο γεμιστό ορθογώνιο πάνω και αριστερά.


 

1ο Βήμα : Εύρεση του Στοιχείου Canvas

Αρχικά, θα πρέπει να εντοπίσουμε το στοιχείο <canvas>, κάτι που γίνεται χρησιμοποιώντας την μέθοδο της DOM HTML getElementById() :

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

 

2ο Βήμα : Δημιουργία ενός Αντικειμένου Σχεδίασης

Δεύτερο, χρειαζόμαστε ένα αντικείμενο σχεδίασης για το. Η μέθοδος getContext() είναι ένα ενσωματωμένο αντικείμενο της HTML, με ιδιότητες και μεθόδους ειδικά για σχεδίαση :

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

 

3ο Βήμα : Σχεδίαση Πάνω στο Canvas

Τέλος, μπορούμε να σχεδιάσουμε πάνω στο. Απλά θα πρέπει να ορίσουμε την ιδιότητα γεμίσματος (fillstyle) του αντικειμένου σχεδίασης στο κόκκινο χρώμα :

ctx.fillStyle = "#FF0000";

 

Η τιμή της ιδιότητας fillStyle μπορεί να είναι ένα χρώμα CSS, ένα βαθμωτό (gradient) ή ένα υπόδειγμα (pattern). Η εξ ορισμού τιμή της (default) είναι το μαύρο χρώμα (black).

 

            Η μέθοδος fillRect(x, y, width, height) σχεδιάζει ένα ορθογώνιο (rectangle), που είναι γεμάτο με το χρώμα που έχουμε ορίσει νωρίτερα στο canvas και ξεκινώντας από τη θέση (0, 0), δηλ. από πάνω αριστερά, έως και τη θέση (150, 75), δηλ. κάτω δεξιά για ένα ορθογώνιο με πλάτος 150 pixels και ύψος 75 pixels :

ctx.fillRect(0, 0, 150, 75);

 

Οι Συντεταγμένες του Canvas

Το στοιχείο canvas της HTML είναι ένα πλέγμα (grid) δύο διαστάσεων, όπου η πάνω αριστερή γωνία του canvas έχει τις συντεταγμένες (0, 0).

 

Σχεδίαση μιας Γραμμής

Για να σχεδιάσουμε μια ευθεία γραμμή σ’ ένα canvas, χρησιμοποιούμε τις παρακάτω μεθόδους :

 

Για να σχεδιαστεί τώρα η γραμμή, θα πρέπει να χρησιμοποιήσουμε μια από τις μεθόδους «μελάνης» ("ink" methods), όπως είναι η μέθοδος stroke().
 

Παράδειγμα

Ορίζουμε ένα σημείο εκκίνησης (starting point) στη θέση (0, 0) και ένα σημείο τερματισμού (ending point) στη θέση (200, 100). Μετά χρησιμοποιούμε την μέθοδο stroke() για να σχεδιάσουμε τη γραμμή :

<!DOCTYPE html>

<html>

<body>

<canvas id="myCanvas" width="200" height="100"

style="border:1px solid #d3d3d3;">

Your browser does not support the canvas element.

</canvas>

<script>

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

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

ctx.moveTo(0, 0);

ctx.lineTo(200, 100);

ctx.stroke();

</script>

</body>

</html>

            Ο παραπάνω HTML κώδικας θα σχεδιάσει ένα ορθογώνιο (canvas) από τη θέση (0, 0) έως και τη θέση (200, 100) αλλά και μια ευθεία γραμμή από τη θέση (0, 0) έως και τη θέση (200, 100).

 

Σχεδίαση Κύκλου

Για να σχεδιάσουμε έναν κύκλο, χρησιμοποιούμε τις εξής μεθόδους :

Παράδειγμα

Ορίζουμε έναν κύκλο με τη μέθοδο arc() και μετά χρησιμοποιούμε τη μέθοδο stroke() για να σχεδιάσουμε τον κύκλο :

<!DOCTYPE html>

<html>

<body>

<canvas id="myCanvas" width="200" height="100"

style="border:1px solid #d3d3d3;">

Your browser does not support the canvas element.

</canvas>

<script>

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

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

ctx.beginPath();

ctx.arc(95, 50, 40, 0, 2*Math.PI);

ctx.stroke();

</script>

</body>

</html>

Βαθμωτά (Gradients) σε Canvas

Τα βαθμωτά (gradients) μπορούν να χρησιμοποιηθούν για να γεμίσουμε ορθογώνια, κύκλους, γραμμές, κείμενα κ.ά. Δηλαδή τα σχήματα στο canvas δεν περιορίζονται μόνο σε συμπαγή (solid) χρώματα.

 

Υπάρχουν δύο διαφορετικά είδη gradients :

 

Όταν έχουμε ένα βαθμωτό (gradient) αντικείμενο, πρέπει να προσθέσουμε δύο ή περισσότερα stops χρωμάτων. Η μέθοδος addColorStop() καθορίζει τα stops των χρωμάτων και τη θέση τους μέσα στο gradient. Οι θέσεις των gradients μπορεί να είναι οπουδήποτε από 0 έως 1. Για να χρησιμοποιήσουμε ένα gradient, ορίζουμε την ιδιότητα fillStyle ή την ιδιότητα strokeStyle σε τιμή gradient και μετά σχεδιάζουμε το σχήμα, που μπορεί να είναι ορθογώνιο, κείμενο ή μια γραμμή.

 

Η Μέθοδος createLinearGradient()

Παράδειγμα

Δημιουργία ενός γραμμικού (linear) gradient, όπου γεμίζουμε ένα ορθογώνιο (rectangle) με το συγκεκριμένο gradient :

<!DOCTYPE html>

<html>

<body>

<canvas id="myCanvas" width="200" height="100"

style="border:1px solid #d3d3d3;">

Your browser does not support the HTML5 canvas tag.

</canvas>

<script>

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

var ctx = c.getContext("2d");

 

// Δημιουργία του gradient

var grd = ctx.createLinearGradient(0, 0, 200, 0);

grd.addColorStop(0, "red");

grd.addColorStop(1, "white");

 

// Γέμισμα με το gradient

ctx.fillStyle = grd;

ctx.fillRect(10, 10, 150, 80);

</script>

</body>

</html>

Ο παραπάνω κώδικας θα εμφανίσει μια γραμμική κλιμάκωση από κόκκινο σε άσπρο χρώμα μέσα σ’ ένα ορθογώνιο διαστάσεων 200 Χ 100 pixels. Το gradient δημιουργείται από τη θέση (10, 10) έως και τη θέση (150, 80).

 

Η Μέθοδος createRadialGradient()

Παράδειγμα

Δημιουργία ενός ακτινωτού/κυκλικού (radial/circular) gradient, όπου γεμίζουμε ένα ορθογώνιο (rectangle) με το gradient :

<!DOCTYPE html>

<html>

<body>

<canvas id="myCanvas" width="200" height="100"

style="border:1px solid #d3d3d3;">

Your browser does not support the HTML5 canvas tag.

</canvas>

<script>

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

var ctx = c.getContext("2d");

 

// Δημιουργία του gradient

var grd = ctx.createRadialGradient(75, 50, 5, 90, 60, 100);

grd.addColorStop(0, "red");

grd.addColorStop(1, "white");

 

// Γέμισμα με το gradient

ctx.fillStyle = grd;

ctx.fillRect(10, 10, 150, 80);

</script>

</body>

</html>

Ο παραπάνω κώδικας θα εμφανίσει μια κυκλική κλιμάκωση από κόκκινο σε άσπρο χρώμα μέσα σ’ ένα ορθογώνιο διαστάσεων 200 Χ 100 pixels. Το gradient δημιουργείται από τη θέση (10, 10) έως και τη θέση (150, 80).

 
 

Σχεδίαση Κειμένου στο Canvas

Για να σχεδιάσουμε κείμενο σ’ ένα canvas, η σημαντικότερη ιδιότητα και οι σημαντικότερες μέθοδοι είναι οι εξής :

 

Η Μέθοδος fillText()

Παράδειγμα

Ορίζει τη γραμματοσειρά (font) σε 30px "Arial" και δημιουργεί ένα «γεμισμένο» κείμενο μέσα στο canvas :

<!DOCTYPE html>

<html>

<body>

<canvas id="myCanvas" width="200" height="100"

style="border:1px solid #d3d3d3;">

Your browser does not support the canvas element.

</canvas>

<script>

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

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

ctx.font = "30px Arial";

ctx.fillText("Hello World", 10, 50);

</script>

</body>

</html>

Ο παραπάνω κώδικας θα εμφανίσει το γεμισμένο κείμενο «Hello World» μέσα σ’ ένα ορθογώνιο διαστάσεων 200 Χ 100 pixels, ξεκινώντας από τη θέση (10, 50).

 

Η Μέθοδος strokeText()

Παράδειγμα

Ορίζει τη γραμματοσειρά (font) σε 30px "Arial" και δημιουργεί μέσα στο canvas ένα κείμενο χωρίς γέμισμα :

<!DOCTYPE html>

<html>

<body>

<canvas id="myCanvas" width="200" height="100"

style="border:1px solid #d3d3d3;">

Your browser does not support the canvas element.

</canvas>

<script>

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

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

ctx.font = "30px Arial";

ctx.strokeText("Hello World", 10, 50);

</script>

</body>

</html>

Ο παραπάνω κώδικας θα εμφανίσει το κείμενο «Hello World» μέσα σ’ ένα ορθογώνιο διαστάσεων 200 Χ 100 pixels, ξεκινώντας από τη θέση (10, 50).

 

Προσθήκη Χρώματος και Κεντράρισμα Κειμένου

Παράδειγμα

Ορίζει τη γραμματοσειρά (font) σε 30px "Comic Sans MS" και εμφανίζει ένα γεμισμένο κόκκινο κείμενο στο κέντρο του canvas :

<!DOCTYPE html>

<html>

<body>

<canvas id="myCanvas" width="300" height="200"

style="border:1px solid #d3d3d3;">

Your browser does not support the canvas element.

</canvas>

<script>

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

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

ctx.font ="30px Comic Sans MS";

ctx.fillStyle = "red";

ctx.textAlign = "center";

ctx.fillText("Hello World", canvas.width/2, canvas.height/2);

</script>

</body>

</html>

Ο παραπάνω κώδικας θα εμφανίσει το κείμενο «Hello World» μέσα σ’ ένα ορθογώνιο διαστάσεων 300 Χ 200 pixels, στο κέντρο.

 

Εικόνες στο Canvas

Για να εμφανίσουμε μια εικόνα σ’ ένα canvas, χρησιμοποιούμε την παρακάτω μέθοδο :

Παράδειγμα

<!DOCTYPE html>

<html>

<body>

<p>Η εικόνα που θα χρησιμοποιηθεί : </p>

<img id="scream" width="220" height="277"

src="pic_the_scream.jpg" alt="The Scream">

<p>Canvas : </p>

<canvas id="myCanvas" width="240" height="297"

style="border:1px solid #d3d3d3;">

Your browser does not support the HTML5 canvas tag.

</canvas>

<script>

window.onload = function() {

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

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

var img = document.getElementById("scream");

ctx.drawImage(img, 10, 10);

};

</script>

</body>

</html>

            Θα πρέπει να έχουμε υπόψη μας ότι δεν μπορούμε να εμφανίσουμε την εικόνα πριν αυτή φορτωθεί. Προς τον σκοπό αυτό θα πρέπει να καλέσουμε τη συνάρτηση window.onload().

 

Ρολόι στο Canvas

Θα δημιουργήσουμε ένα αναλογικό ρολόι με την HTML canvas.

 

Μέρος Ι - Δημιουργία του Canvas

Το ρολόι χρειάζεται ένα HTML container. Δημιουργούμε ένα 300 x 300 pixel HTML canvas:

<!DOCTYPE html>

<html>

<body>

<canvas id="canvas" width="300" height="300"

style="background-color:#333">

</canvas>
<script
>

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

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

var radius = canvas.height / 2;

ctx.translate(radius, radius);

radius = radius * 0.90

drawClock();

function drawClock() {

ctx.arc(0, 0, radius, 0 , 2*Math.PI);

ctx.fillStyle = "white";

ctx.fill();

}

</script>

</body>

</html>

 

Επεξήγηση του Κώδικα

Προσθέτουμε ένα στοιχείο HTML <canvas> στην ιστοσελίδα :

<canvas id="canvas" width="300" height="300" style="background-color:#333">

</canvas>

            Δημιουργούμε ένα αντικείμενο (object) canvas με την εντολή var canvas από το στοιχείο HTML :

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

 

Δημιουργούμε ένα 2d αντικείμενο σχεδίασης (drawing object) με την εντολή var ctx για το αντικείμενο canvas :

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

 

Υπολογίζουμε την ακτίνα (radius) του ρολογιού με βάση το ύψος (height) του canvas :

var radius = canvas.height / 2;

 

 

Ξανατοποθετούμε τη θέση (0, 0) του αντικειμένου σχεδίασης στο κέντρο του canvas :

ctx.translate(radius, radius);

 

Ελαττώνουμε την ακτίνα του ρολογιού στο 90% ώστε το ρολόι να σχεδιαστεί (χωρέσει) μέσα στο canvas :

radius = radius * 0.90;

 

Δημιουργούμε μια συνάρτηση (function) για να σχεδιασθεί το ρολόι (clock) :

function drawClock() {

ctx.arc(0, 0, radius, 0 , 2*Math.PI);

ctx.fillStyle = "white";

ctx.fill();

}

 

Canvas Clock Face

Μέρος II – Σχεδίαση του Προσώπου του Ρολογιού (Clock Face)

Το ρολόι χρειάζεται ένα πρόσωπο (face) και προς τον σκοπό αυτό δημιουργούμε μια σχετική συνάρτηση στην JavaScript :

<!DOCTYPE html>

<html>

<body>

<canvas id="canvas" width="400" height="400"

style="background-color:#333">

</canvas>

<script>

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

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

var radius = canvas.height / 2;

ctx.translate(radius, radius);

radius = radius * 0.90

drawClock();

function drawClock() {

drawFace(ctx, radius);

}

function drawFace(ctx, radius) {

var grad;

ctx.beginPath();

ctx.arc(0, 0, radius, 0, 2*Math.PI);

ctx.fillStyle = 'white';

ctx.fill();

grad = ctx.createRadialGradient(0, 0, radius*0.95,

0, 0, radius * 1.05);

grad.addColorStop(0, '#333');

grad.addColorStop(0.5, 'white');

grad.addColorStop(1, '#333');

ctx.strokeStyle = grad;

ctx.lineWidth = radius*0.1;

ctx.stroke();

ctx.beginPath();

ctx.arc(0, 0, radius*0.1, 0, 2*Math.PI);

ctx.fillStyle = '#333';

ctx.fill();

}

</script>

</body>

</html>

 

Επεξήγηση του Κώδικα

Δημιουργούμε μια συνάρτηση drawFace() για να σχεδιάσουμε το πρόσωπο (face) του ρολογιού :

function drawClock() {

drawFace(ctx, radius);

}


function
drawFace(ctx, radius) {

}

 

Σχεδίαση του άσπρου κύκλου :

ctx.beginPath();

ctx.arc(0, 0, radius, 0, 2*Math.PI);

ctx.fillStyle = 'white';

ctx.fill();

 

Δημιουργία ενός ακτινωτού (radial) gradient (95% και 105% από την αρχική ακτίνα του ρολογιού) :

grad = ctx.createRadialGradient(0,0,radius*0.95, 0,0,radius*1.05);

 

Δημιουργία 3 color stops, που αντιστοιχούν στο εσωτερικό (inner), μεσαίο (middle) και έξω (outer) άκρο του τόξου (arc) :

grad.addColorStop(0, '#333');

grad.addColorStop(0.5, 'white');

grad.addColorStop(1, '#333');

            Θα πρέπει να έχουμε υπόψη μας ότι τα color stops δημιουργούν ένα3D effect.

 

Ορισμός του gradient ως το stroke style για το αντικείμενο σχεδίασης :

ctx.strokeStyle = grad;

 

Ορισμός του πλάτους της γραμμής (line width) του αντικειμένου σχεδίασης (10% της ακτίνας-radius) :

ctx.lineWidth = radius * 0.1;

 

Σχεδίαση του κύκλου :

ctx.stroke();

 

Σχεδίαση του κέντρου του κύκλου :

ctx.beginPath();

ctx.arc(0, 0, radius*0.1, 0, 2*Math.PI);

ctx.fillStyle = '#333';

ctx.fill();

Αριθμοί Ρολογιού στο Canvas

Μέρος III – Σχεδίαση των Αριθμών του Ρολογιού

Το ρολόι χρειάζεται αριθμούς και προς τον σκοπό αυτό δημιουργούμε μια συνάρτηση στην JavaScript :

<!DOCTYPE html>

<html>

<body>

<canvas id="canvas" width="400" height="400" style="background-color:#333">

</canvas>

<script>

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

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

var radius = canvas.height / 2;

ctx.translate(radius, radius);

radius = radius * 0.90

drawClock();

function drawClock() {

drawFace(ctx, radius);

drawNumbers(ctx, radius);

}

function drawFace(ctx, radius) {

var grad;

ctx.beginPath();

ctx.arc(0, 0, radius, 0, 2*Math.PI);

ctx.fillStyle = 'white';

ctx.fill();

grad = ctx.createRadialGradient(0, 0,

radius * 0.95, 0, 0, radius * 1.05);

grad.addColorStop(0, '#333');

grad.addColorStop(0.5, 'white');

grad.addColorStop(1, '#333');

ctx.strokeStyle = grad;

ctx.lineWidth = radius*0.1;

ctx.stroke();

ctx.beginPath();

ctx.arc(0, 0, radius*0.1, 0, 2*Math.PI);

ctx.fillStyle = '#333';

ctx.fill();

}

function drawNumbers(ctx, radius) {

var ang;

var num;

ctx.font = radius*0.15 + "px arial";

ctx.textBaseline="middle";

ctx.textAlign="center";

for (num = 1; num < 13; num++) {

ang = num * Math.PI / 6;

ctx.rotate(ang);

ctx.translate(0, -radius*0.85);

ctx.rotate(-ang);

ctx.fillText(num.toString(), 0, 0);

ctx.rotate(ang);

ctx.translate(0, radius*0.85);

ctx.rotate(-ang);

}

}

</script>

</body>

</html>

 

Επεξήγηση του Κώδικα

Ορίζουμε το μέγεθος της γραμματοσειράς (font size) του αντικειμένου σχεδίασης στο 15% της ακτίνας (radius) :

ctx.font = radius*0.15 + "px arial";

 

Ορίζουμε την ευθυγράμμιση κειμένου (text alignment) στο μέσο και το κέντρο της θέσηε εκτύπωσης :

ctx.textBaseline="middle";

ctx.textAlign="center";

 

Υπολογίζουμε τη θέση εκτύπωσης (print position) για 12 αριθμούς στο 85% της ακτίνας (radius), με περιστροφή (PI/6 = π/6) για τον κάθε αριθμό :

for (num= 1; num < 13; num++) {

ang = num * Math.PI / 6;

ctx.rotate(ang);

ctx.translate(0, -radius*0.85);

ctx.rotate(-ang);

ctx.fillText(num.toString(), 0, 0);

ctx.rotate(ang);

ctx.translate(0, radius*0.85);

ctx.rotate(-ang);

}

 

Οι Δείχτες του Ρολογιού του Canvas

Μέρος IV – Σχεδίαση των Δειχτών του Ρολογιού

Το ρολόι χρειάζεται δείχτες (hands) και προς τον σκοπό αυτό δημιουργούμε μια συνάρτηση στην JavaScript :

 

<!DOCTYPE html>

<html>

<body>

<canvas id="canvas" width="400" height="400" style="background-color:#333">

</canvas>

<script>

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

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

var radius = canvas.height / 2;

ctx.translate(radius, radius);

radius = radius * 0.90

drawClock();

 

function drawClock() {

drawFace(ctx, radius);

drawNumbers(ctx, radius);

drawTime(ctx, radius);

}

 

function drawFace(ctx, radius) {

var grad;

ctx.beginPath();

ctx.arc(0, 0, radius, 0, 2*Math.PI);

ctx.fillStyle = 'white';

ctx.fill();

grad = ctx.createRadialGradient(0, 0, radius*0.95,

0, 0, radius * 1.05);

grad.addColorStop(0, '#333');

grad.addColorStop(0.5, 'white');

grad.addColorStop(1, '#333');

ctx.strokeStyle = grad;

ctx.lineWidth = radius*0.1;

ctx.stroke();

ctx.beginPath();

ctx.arc(0, 0, radius*0.1, 0, 2*Math.PI);

ctx.fillStyle = '#333';

ctx.fill();

}

 

function drawNumbers(ctx, radius) {

var ang;

var num;

ctx.font = radius*0.15 + "px arial";

ctx.textBaseline="middle";

ctx.textAlign="center";

for(num = 1; num < 13; num++) {

ang = num * Math.PI / 6;

ctx.rotate(ang);

ctx.translate(0, -radius*0.85);

ctx.rotate(-ang);

ctx.fillText(num.toString(), 0, 0);

ctx.rotate(ang);

ctx.translate(0, radius*0.85);

ctx.rotate(-ang);

}

}

 

function drawTime(ctx, radius){

var now = new Date();

var hour = now.getHours();

var minute = now.getMinutes();

var second = now.getSeconds();

// hour

hour = hour%12;

hour = (hour*Math.PI/6) +  (minute*Math.PI/(6*60)) +

(second * Math.PI / (360*60));

drawHand(ctx, hour, radius*0.5, radius*0.07);

            // minute

minute = (minute*Math.PI / 30) + (second *

Math.PI / (30*60));

drawHand(ctx, minute, radius*0.8, radius*0.07);

// second

second=(second*Math.PI/30);

drawHand(ctx, second, radius*0.9, radius*0.02);

}

 

function drawHand(ctx, pos, length, width) {

ctx.beginPath();

ctx.lineWidth = width;

ctx.lineCap = "round";

ctx.moveTo(0,0);

ctx.rotate(pos);

ctx.lineTo(0, -length);

ctx.stroke();

ctx.rotate(-pos);

}

</script>

</body>

</html>

 

 

Επεξήγηση του Κώδικα

Χρησιμοποιούμε τη συνάρτηση Date() για να πάρουμε από το σύστημα την ώρα (hour), τα λεπτά (minute) και τα δευτερόλεπτα (second) :

var now = new Date();
var hour = now.getHours();

var minute = now.getMinutes();

var second = now.getSeconds();


 

Υπολογίζουμε τη γωνία του δείχτη της ώρας (hour hand) και το σχεδιάζουμε με μήκος το 50% της ακτίνας (radius) και με πλάτος το 7% της ακτίνας (radius) :

hour = hour % 12;
hour = (hour * Math.PI/6) + (minute * Math.PI / (6*60)) +

(second * Math.PI / (360*60));

drawHand(ctx, hour, radius*0.5, radius*0.07);

Χρησιμοποιούμε την ίδια τεχνική για τα λεπτά (minutes) και τα δευτερόλεπτα (seconds). Η ρουτίνα drawHand() απλά σχεδιάζει μια γραμμή με δεδομένο μήκος (length) και πλάτος (width).

 

Λειτουργία του Ρολογιού Canvas

Θα κατασκευάσουμε τώρα ένα αναλογικό ρολόι με την τεχνολογία HTML Canvas.

 

Μέρος V - Ξεκίνημα του Ρολογιού

Για να ξεκινήσει (δουλέψει) το ρολόι, καλούμε κατά διαστήματα τη συνάρτηση drawClock() :

 

<!DOCTYPE html>

<html>

<body>

<canvas id="canvas" width="400" height="400" style="background-color:#333">

</canvas>

<script>

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

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

var radius = canvas.height / 2;

ctx.translate(radius, radius);

radius = radius * 0.90

setInterval(drawClock, 1000);

 

function drawClock() {

drawFace(ctx, radius);

drawNumbers(ctx, radius);

drawTime(ctx, radius);

}

 

function drawFace(ctx, radius) {

var grad;

ctx.beginPath();

ctx.arc(0, 0, radius, 0, 2*Math.PI);

ctx.fillStyle = 'white';

ctx.fill();

grad = ctx.createRadialGradient(0, 0, radius*0.95,

0, 0, radius*1.05);

grad.addColorStop(0, '#333');

grad.addColorStop(0.5, 'white');

grad.addColorStop(1, '#333');

ctx.strokeStyle = grad;

ctx.lineWidth = radius*0.1;

ctx.stroke();

ctx.beginPath();

ctx.arc(0, 0, radius*0.1, 0, 2*Math.PI);

ctx.fillStyle = '#333';

ctx.fill();

}

 

function drawNumbers(ctx, radius) {

var ang;

var num;

ctx.font = radius*0.15 + "px arial";

ctx.textBaseline = "middle";

ctx.textAlign = "center";

for(num = 1; num < 13; num++) {

ang = num * Math.PI / 6;

ctx.rotate(ang);

ctx.translate(0, -radius*0.85);

ctx.rotate(-ang);

ctx.fillText(num.toString(), 0, 0);

ctx.rotate(ang);

ctx.translate(0, radius*0.85);

ctx.rotate(-ang);

}

}

 

function drawTime(ctx, radius){

var now = new Date();

var hour = now.getHours();

var minute = now.getMinutes();

var second = now.getSeconds();

//hour

hour = hour%12;

hour = (hour*Math.PI/6) +

(minute*Math.PI/(6*60)) +

(second*Math.PI/(360*60));

drawHand(ctx, hour, radius*0.5, radius*0.07);

//minute

minute = (minute * Math.PI/30) +

(second * Math.PI/(30*60));

drawHand(ctx, minute, radius*0.8, radius*0.07);

// second

second = (second*Math.PI/30)

drawHand(ctx, second, radius*0.9, radius*0.02);

}

 

function drawHand(ctx, pos, length, width) {

ctx.beginPath();

ctx.lineWidth = width;

ctx.lineCap = "round";

ctx.moveTo(0, 0);

ctx.rotate(pos);

ctx.lineTo(0, -length);

ctx.stroke();

ctx.rotate(-pos);

}

</script>

</body>

</html>

 

Επεξήγηση του Κώδικα

Το μόνο πράγμα που πρέπει να κάνουμε για να ξεκινήσει το ρολόι είναι να καλούμε κατά διαστήματα τη συνάρτηση drawClock() .

 

Substitute:

drawClock();

With:

setInterval(drawClock, 1000);

Το διάστημα (interval) είναι σε χιλιοστά του δευτερολέπτου (milliseconds) και έτσι η συνάρτηση drawClock() θα καλείται κάθε 1 δευτερόλεπτο (1.000 milliseconds).

 

HTML Canvas Reference

Το tag (ετικέτα) HTML5 <canvas> χρησιμοποιείται για να σχεδιάσουμε γραφικά (graphics), στον αέρα, μέσω κώδικα (scripting), που είναι συνήθως η JavaScript. Όμως, το στοιχείο <canvas> δεν διαθέτει από μόνο του κάποιες σχεδιαστικές δυνατότητες (είναι απλά ένα container για γραφικά), οπότε πρέπει να χρησιμοποιήσουμε ένα script για να σχεδιάσουμε τα γραφικά.

 

Η μέθοδος getContext() επιστρέφει ένα αντικείμενο (object) που παρέχει μεθόδους (methods) και ιδιότητες (properties) για σχεδίαση πάνω στο canvas. Αυτή η αναφορά (reference) θα καλύψει τις μεθόδους και τις ιδιότητες του αντικειμένου getContext("2d"), το οποίο μπορούμε να χρησιμοποιήσουμε για να σχεδιάσουμε κείμενα (text), γραμμές (lines), κουτιά (boxes), κύκλους (circles) κ.ά., πάνω στο canvas.

 

 

Χρώματα, Στυλ και Σκιές

Ιδιότητα

Περιγραφή

fillStyle

Ορίζει ή επιστρέφει το χρώμα, το gradient ή το pattern που θα χρησιμοποιηθεί για να γεμίσει το σχέδιο

strokeStyle

Ορίζει ή επιστρέφει το χρώμα, το gradient ή το υπόδειγμα που θα χρησιμοποιηθεί για τα strokes

shadowColor

Ορίζει ή επιστρέφει το χρώμα που θα χρησιμοποιηθεί για σκιές

shadowBlur

Ορίζει ή επιστρέφει το επίπεδο θόλωσης (blur level) για τις σκιές

shadowOffsetX

Ορίζει ή επιστρέφει το χρώμα την οριζόντια απόσταση της σκιάς από το σχήμα

shadowOffsetY

Ορίζει ή επιστρέφει το χρώμα την κάθετη απόσταση της σκιάς από το σχήμα

Μέθοδος

Περιγραφή

createLinearGradient()

Δημιουργεί ένα γραμμικό (linear) gradient για χρήση στο περιεχόμενο του canvas

createPattern()

Επιστρέφει ένα συγκεκριμένο στοιχείο στην καθορισμένη διεύθυνση (κατεύθυνση)

createRadialGradient()

Δημιουργεί ένα ακτινωτό.κυκλικό (radial/circular) gradient για χρήση στο περιεχόμενο του canvas

addColorStop()

Καθορίζει τα χρώματα και τη θέση stop σ’ ένα αντικείμενο gradient

 

 

Στυλ Γραμμής

Ιδιότητα

Περιγραφή

lineCap

Ορίζει ή επιστρέφει το στυλ (style) των άκρων (end caps) μιας γραμμής

lineJoin

Ορίζει ή επιστρέφει το είδος (type) της γωνίας που δημιουργείται όταν συναντιούνται δύο γραμμές

lineWidth

Ορίζει ή επιστρέφει το τρέχον πλάτος της γραμμής

miterLimit

Ορίζει ή επιστρέφει το μέγιστο μήκος θηλυκώματος (miter)

Ορθογώνια

Μέθοδος

Περιγραφή

rect()

Δημιουργεί ένα ορθογώνιο (rectangle)

fillRect()

Σχεδιάζει ένα γεμισμένο (filled) ορθογώνιο (rectangle)

strokeRect()

Σχεδιάζει ένα μη γεμισμένο (no fill) ορθογώνιο (rectangle)

clearRect()

Καθαρίζει τα συγκεκριμένα pixels εντός ενός δεδομένου ορθογωνίου (rectangle)

 

 

Διαδρομές

Μέθοδος

Περιγραφή

fill()

Γεμίζει το τρέχον σχέδιο ή διαδρομή (path)

stroke()

Σχεδιάζει (δημιουργεί) τη διαδρομή (path) που έχουμε ορίσει προηγουμένως

beginPath()

Ξεκινάει μια διαδρομή (path) ή επαναφέρει (reset) το τρέχον path

moveTo()

Μετακινεί το path στο συγκεκριμένο σημείο του canvas, χωρίς να δημιουργεί μια γραμμή

closePath()

Δημιουργεί μια διαδρομή (path) από το τρέχον σημείο πίσω προς το αρχικό σημείο

lineTo()

Προσθέτει ένα καινούργιο σημείο και δημιουργεί μια γραμμή προς εκείνο το σημείο από το τελευταίο καθορισμένο σημείο στο canvas

clip()

Κόβει (clip) μια περιοχή συγκεκριμένου σχήματος και μεγέθους από ένα σχήμα από το αρχικό canvas

quadraticCurveTo()

Δημιουργεί μια καμπύλη Bézier 2ου βαθμού (τετραγωνική)

bezierCurveTo()

Δημιουργεί μια καμπύλη Bézier 3ου βαθμού (κυβική)

arc()

Δημιουργεί τόξο, καμπύλη ή κύκλο

arcTo()

Δημιουργεί ένα τόξο ή καμπύλη ανάμεσα σε δύο εφαπτομένες

isPointInPath()

Επιστρέφει την τιμή true αν το συγκεκριμένο σημείο βρίσκεται στην τρέχουσα διαδρομή (path), αλλιώς επιστρέφει false

 

 

Μετασχηματισμοί

Μέθοδος

Περιγραφή

scale()

Κλιμακώνει, δηλ. μεγαλώνει ή μικραίνει το τρέχον σχέδιο (drawing)

rotate()

Περιστρέφει το τρέχον σχέδιο (drawing)

translate()

Μεταφέρει την θέση (0, 0) πάνω στο canvas

transform()

Αντικαθιστά τον τρέχον πίνακα μετασχηματισμού (matrix) για το σχέδιο (drawing)

setTransform()

Επαναφέρει τον τρέχον μετασχηματισμό (transform) σε πίνακα ταυτότητα (identity matrix) και μετά τρέχει (εκτελεί) τη συνάρτηση transform()

Κείμενο

Ιδιότητα

Περιγραφή

font

Ορίζει ή επιστρέφει τις τρέχουσες ιδιότητες font για το περιεχόμενο του κειμένου

textAlign

Ορίζει ή επιστρέφει την τρέχουσα ευθυγράμμιση για το περιεχόμενο του κειμένου

textBaseline

Ορίζει ή επιστρέφει το τρέχον text baseline που χρησιμοποιήθηκεused when drawing text

Μέθοδος

Περιγραφή

fillText()

Σχεδιάζει ένα γεμισμένο κείμενο (filled) στο canvas

strokeText()

Σχεδιάζει μη γεμισμένο κείμενο (no fill) στο canvas

measureText()

Επιστρέφει ένα αντικείμενο που περιέχει το πλάτος του καθορισμένου κειμένου

 

Σχεδίαση Εικόνας

Method

Description

drawImage()

Σχεδιάζει μια εικόνα, ένα canvas ή video στο canvas

 

Χειρισμός Pixels

Property

Description

width

Επιστρέφει το πλάτος (width) ενός αντικειμένου ImageData

height

Επιστρέφει το ύψος (height) ενός αντικειμένου ImageData

data

Επιστρέφει ένα αντικείμενο που περιέχει τα δεδομένα εικόνας ενός συγκεκριμένου αντικειμένου ImageData

Method

Description

createImageData()

Δημιουργεί ένα καινούργιο, κενό αντικείμενο ImageData

getImageData()

Επιστρέφει ένα αντικείμενο ImageData που αντιγράφει τα δεδομένα των pixels για ένα ορθογώνιο ενός canvas

putImageData()

Τοποθετεί τα δεδομένα μιας εικόνας (από ένα καθορισμένο αντικείμενο ImageData) πίσω στο canvas

 

Σύνθεση

Property

Description

globalAlpha

Ορίζει ή επιστρέφει την τρέχουσα τιμή alpha ή transparency (διαφάνειας) του σχεδίου

globalCompositeOperation

Ορίζει ή επιστρέφει το πώς μια καινούργια εικόνα σχεδιάζεται πάνω σε μια υπάρχουσα εικόνα

 

Άλλα

Method

Description

save()

Αποθηκεύει την κατάσταση (state) του τρέχοντος context

restore()

Επιστρέφει την πρόσφατα αποθηκευμένη κατάσταση του path και τα χαρακτηριστικά του (attributes)

createEvent()

 

getContext()

 

toDataURL()

 

 

back.gif (9867 bytes)

Επιστροφή