HTML5 Animation  

 

Μπουραντάς Γιώργος(ΑΜ : 123903) Τζίνος Γιώργος(ΑΜ : 123896) 

 

  

ΑΛΕΞΑΝΔΡΕΙΟ ΤΕΧΝΟΛΟΓΙΚΟ ΕΚΠΑΙΔΕΥΤΙΚΟ ΙΔΡΥΜΑ 

                

ΤΜΗΜΑ ΠΛΗΡΟΦΟΡΙΚΗΣ 

1 από 21 

Περιεχόμενα  

  

1. Introduction……………………………………………………………….3 2. Animating Size on an Interval…………………………………………..4 3. Movement Between Points …………………………………………….9 4. Image Optimization…………………………………………………….15 5. Canvas & Image Rotation……………………………………………..18 6. Bιβλιογραφία…………………………………………………………….21 

                             

2 από 21 

1­Introduction   

Περιγραφή :

    O καμβάς είναι ένα element πάνω στο οποίο μπορούμε να ζωγραφίσουμε όπως με λαδομπογιά. Μια από τις πρώτες ζωγραφιές με λαδομπογιά πάνω σε καμβά είναι μια γαλλική Μαντόνα από το 1410.Ένας καμβάς συνήθως βρίσκεται σε ξύλινο περίγραμμα γιαυτό υπάρχουν οι μέθοδοι διαχείρισης του περιγράμματος του. Στον καμβά HTML, μπορείτε να σχεδιάσετε όλα τα είδη των γραφικών, από απλές γραμμές, σε σύνθετα αντικείμενα γραφικών. Η HTML5 χρησιμοποιεί το tag <canvas  για το σχεδιασμό των γραφικών, on the fly.Δηλαδή μέσω scripting (συνήθως μέσω JavaScript). Για να ζωγραφίσετε στον καμβα θα πρεπει να καλέσετε την μέθοδος getContext () η οποια επιστρέφει ένα αντικείμενο που παρέχει μεθόδους και τις ιδιότητες για την κατάρτιση στον καμβά. Αυτή η αναφορά θα καλύπτει τις ιδιότητες και τις μεθόδους της getContext ("2d") αντικείμενο, το οποίο μπορεί να χρησιμοποιηθεί για να τραβήξει το κείμενο, γραμμές, κουτιά, κύκλους, και περισσότερα ­ πάνω στον καμβά.   

Υποστήριξη :   Internet Explorer 9, Firefox, Opera, Chrome, and Safari υποστηρίζουν <canvas> καθως και τις ιδιότητες και τις μεθόδους του. Σημέιωση: Ο Internet Explorer 8 και καθως και οι προηγούμενες του εκδόσεις, δεν υποστηρίζουν το <canvas> element.   

  *** Document Of All Functions *** http://www.w3schools.com/tags/ref_canvas.asp 

    

 

   

3 από 21 

2 ­ Animating Size on an Interval Κώδικας : ./files/2 ­ Animating Size on an Interval/example1.html 

 Στο παράδειγμα που ακολουθεί θα παρουσιάσουμε πως να δημιουργήσουμε μέσα από τον JavaScript κώδικα δυναμικά ένα κύκλο ο οποίος θα κουνιέται , θα αλλάζει μέγεθος και θα έχει το εφέ ότι ο κύκλος “πηγαίνει” στον “διάστημα­ βάθος”.Με την βοήθεια ενός Canva και τις συντεταγμένες X,Y του κύκλου θα μπορέσουμε να εφαρμόσουμε αυτές τις ενέργεις.  

       

4 από 21 

Όλος ο κώδικας του παραδείγματος.  

          

5 από 21 

Επεξήγηση κώδικα :  Αρχικά στο body βάζουμε ένα element  canvas και του ορίζουμε ένα μαύρο dotted πλαίσιο 5px.Του ορίζουμε id=”canvas” ώστε μέσω JavaScript και DOM να μπορούμε να έχουμε προσπέλαση σε αυτό το element.Τέλος του ορίζουμε 500px το ύψος και πλάτος του.  

 Εικόνα 2.1

Στις γραμμές τέσσερα και πέντε ορίζουμε 3 global μεταβλητές.Οι myContext και myCanvas εξηγούνται παρακάτω.Με την μεταβλητή fps(frames per secord) ορίζουμε το πόσο γρήγορα θα εμφανίζονται οι αλλαγές που γίνονται στον Canva. 

Εικόνα 2.

Στο JavaScript μέρος του κώδικα αρχικά ορίζουμε στην γραμμή έξι ότι όταν φορτωθεί η σελίδα θα καλέσει την μέθοδο “function()”.Με την σειρά της η μέθοδος “function()” αρχικοποιεί τις μεταβλητές myCanvas και myContext , τέλος καλεί την μέθοδο loop().Στην μεταβλητή myCanvas ορίζει την αναφορά προς το element με ID “canvas”.Στην myContext ορίζει τις μεθόδους που έχει το αντικείμενο myCanvas ώστε να μπορέσουμε να τις χρησιμοποιήσουμε.(Εικόνα 2)  Μέθοδος loop().

6 από 21 

 Εικόνα 2.2 

Επιπλέον για την μέθοδο loop() χρειαζόμαστε άλλες πέντε global μεταβλητές.H μεταβλητή i θα έχει τον ρόλο του “Χ,Υ” θέσεις στον canva.Οι μεταβλητές s1 και s2 θα είναι το αρχικό μέγεθος(ακτίνα) της μπάλας και το τελικό αντίστοιχα.Οι μεταβλητές a1 και a2 είναι στα πόσα frames θέλουμε η μπάλα να αλλάζει το μέγεθός της.  Η μέθοδος loop() το μόνο που κάνει είναι να ορίζει έναν setInterval ο οποίος ως δεύτερο όρισμα δέχεται έναν αριθμό ο οποίος ορίζει το πόσο γρήγορα θα καλεί την μέθοδο που δέχεται ως πρώτο όρισμα.  Αρχικά αυξάνει το “Χ και Υ” το i δηλαδή. Αυτό έχει ως αποτέλεσμα ο κύκλος να αρχίζει από πάνω αριστερά και να φτάσει κάτω δεξιά παίρνοντας όλες τις ενδιάμεσες τιμές με άλλα λόγια η κίνηση που θα κάνει ο κύκλος είναι η διαγώνιος του canva.  

 Εικόνα 2.3 

  Έπειτα με την clearRect δημιουργεί ένα ορθογώνιο με διαστάσεις 500px πλάτος και ύψος και καθαρίζει όλων τον canva όπου οι δύο πρώτες παράμετροι ορίζουν από ποιο σημείο θα καθαρίζουν τον canva. 

   Εικόνα 2.4 

Η beginPath δίνει την δυνατότητα να ζωγραφίζουμε τον κύκλο στο canva. Η fillStyle δίνει χρώμα κόκκινο στον κύκλο. 

7 από 21 

 Εικόνα 2.5 

 Η arc δέχεται έξη παραμέτρους. Οι δύο πρώτες είναι το “X,Y”, η τρίτη είναι το μέγεθος(ακτίνα) του κύκλου.Για να ζωγραφίσουμε έναν κύκλο πρέπει να του πούμε από ποιά γωνία μεχρί ποιά άλλη γωνία πρέπει να ζωγραφίσει τον κύκλο.Τον ρόλο αυτό έχουν η τέταρτη και πέμπτη παράμετρος , από την γωνία μηδέν μέχρι τα Math.PI*2.Ενώ η έκτη παράμετρος ορίζει το πως θέλει να ζωγραφίσει τον κύκλο από αριστερά προς τα δεξιά ή το ανάποδο.(Από την τέταρτη παράμετρο εως την πέμπτη ή το ανάποδο).  Στο πρώτο if της παραπάνω εικόνας ζωγραφίζει έναν κύκλο με s1 ακτίνα.Ο κύκλος θα φτιάχνετε μέχρι το “X”(i) γίνει μεγαλύτερο από το a1.  Στο δεύτερο if θα ζωγραφίζει έναν κύκλο με s1 ­ ((s1­s2)/a2)*(i­a1) ακτίνα.Ουσιαστικά αυτό θα κάνει το εφέ να κουνιέται ο κύκλος στο “βάθος”.Ο κύκλος θα φτιάχνετε μέχρι το “X”(i) γίνει μεγαλύτερο από το a1+a2.  Τέλος , στο else θα ζωγραφίζει έναν κύκλο με s2 ακτίνα.  

 Εικόνα 2.6 

 Για να εμφανιστεί ο κύκλος πρέπει να σταματήσουμε να τον ζωγραφίζουμε με την closePath(). Μέχρι τώρα έχουμε ζωγραφίσει αλλά δεν φαίνεται τίποτα στον canva.Για να φανούν πρέπει να τα ζωγραφίσουμε μέσα στον canva και η μέθοδος fill() κάνει αυτό ακριβός.      

 3 ­ Movement Between Points. 

8 από 21 

   Κώδικας : ./files/ 3 ­ Movement Between Points/example2.html 

  Χρησιμοποιούμε : 

Ένα open source script της http://modernizr.com/  η οποία είναι μια βιβλιοθήκη JavaScript  που παρέχει HTML5 και CSS3 χαρακτηριστικά στον browser του χρήστη. 

  Επεξήγηση κώδικα : 

  Αρχικά έχουμε δηλώσει απλά ονομαστικά όλες τις μεταβλητές ώστε να τις διαχειριζόμαστε σε όλες τις μεθόδους και έπειτα θα της ορίσουμε σε μια μέθοδο ώστε να γίνει χρήση reset όταν η μπάλα φτάνει στον προορισμό της. Έτσι λοιπόν ξεκινάμε. Μόλις φορτωθεί η σελίδα θα καλέσουμε την μέθοδο 

eventWindowLoaded() για να μπορέσει πλέον να πάρει τον καμβά από το document 

διαφορετικά η getContext(“2d”) θα μας επιστρέψει Null.Και έπειτα αυτή καλεί την startup για 

αρχικοποίηση μεταβλητών και στην συνέχεια την gameLoop για να ξεκινήσει το παιχνίδι 

9 από 21 

Εικόνα 3.1 

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

   Εικόνα 3.2 

Στη συνέχεια δημιουργούμε ένα ζευγάρι δυναμικών πινάκων, το καθένα με ένα χ και y μεταβλητών που θα αντιπροσωπεύουν τα δύο σημεία που θέλουμε να μετακινηθείτε. Για αυτό το παράδειγμα, θα προχωρήσουμε από 20,250 εως 480,250 

   

Εικόνα 3.3  

Τώρα θα υπολογίσουμε την παραπάνω εξίσωση.   ΒΗΜΑ 1: Υπολογίζω διάφορες μεταξύ του πρώτου και δεύτερου x και y : 

 Εικόνα 3.4 

   

10 από 21 

ΒΗΜΑ 2:  Για να προσδιοριστεί η τιμή της απόστασης, Θα πρέπει να πολλαπλασιάσουμε τις τιμές που μόλις βρήκαμε ώστε να είναι στο τετράγωνο όπως και στην εξίσωση και στην συνέχεια να τις προσθέσαμε, και τέλος θα χρησιμοποιήσουμε τη λειτουργία Math.sqrt () για να πάρουμε την τετραγωνική ρίζα του αριθμού: 

 Εικόνα 3.5 

Στη συνέχεια, θα πρέπει να χρησιμοποιεί το υπολογιζόμενη τιμή της απόσταση με τρόπο που θα μας επιτρέψει να μετακινήσετε ένα αντικείμενο από το σημείο P1 στο P2. Το πρώτο πράγμα που κάνουμε είναι να υπολογίσουμε πόσες κινήσεις (κλήσεις προς drawScreen ()) θα πάρει το αντικείμενο αν κινείται με τη δεδομένη τιμή της ταχύτητας(5). Αυτό το βρίσκουμε διαιρώντας την απόσταση από την ταχύτητα: 

 Εικόνα 3.6 

 Στη συνέχεια, θα βρούμε την απόσταση για να μετακινήσετε τα Χ και Υ σε κάθε κλήση προς 

drawScreen (). Ονομάζουμε αυτές τις μεταβλητές xunits και yunits: 

 Εικόνα 3.7 

Τέλος, έχουμε δημιουργήσει ένα δυναμικό αντικείμενο που ονομάζεται μπάλα που κρατά την 

x και y τιμή του P1: 

 Εικόνα 3.8 

Ορίζουμε έναν πίνακα points στον οποίο και θα τοποθετήσουμε τα σημεία

 

Εικόνα 3.9 Φορτώνουμε μία εικόνα 4x4 pixel,την οποία θα την χρησιμοποιήσουμε για να εμφανίσουμε τα 

σημεία στον καμβά. 

11 από 21 

 

Εικόνα 3.10 

Και δημιουργούμε την μέθοδο gameLoop η οποία ελέγχει αρχικά αν ο browser μας υποστηρίζει Modernizr.canvas και έπειτα ορίζει το διάστημα που θα καλούμε την function drawScreen () με την χρήση της μεθόδου setTimeout : 

 

Εικόνα 3.11  

Στο σημείο αυτό θα ζωγραφίσουμε τoν καμβά : Βάφει το background του καμβά σε χρώμα #EEEEEE και το ορίζει σε ολόκληρο το μέγεθος του καμβά με την εντολή fillRect.Έπειτα φτιάχνει ένα περίγραμμα στο καμβά και το χρωματίζει σε χρώμα μαύρο. Αυτό πιάνει πλάτος – 2 και ύψος – 2 καθώς ξεκινάει και στις συντεταγμένες του καμβά x=1 y=1. 

 

Εικόνα 3.12 

Στη function drawScreen (), πρέπει πρώτα να ελέγξετε εάν η μεταβλητή κινήσεις (moves) είναι μεγαλύτερη από το μηδέν. Αν ναι, είμαστε ακόμα υποτίθεται σε κατάσταση για να μετακινήσουμε την μπάλα σε όλη την οθόνη, διότι δεν έχουμε ακόμη φθάσει στο σημείο P2. Θα μειώσουμε τις κινήσεις (moves­­) και στη συνέχεια θα ενημερώσουμε τα x και y ιδιότητες του αντικειμένου μπάλα με την πρόσθεση των xunits στο x και y yunits ώστε να δώσουμε στην μπάλα κίνηση. Aλλιώς θα κάνει ουσιαστικά reset όλες τις μεταβλητές και η διαδικασία θα ξανά αρχίσει από την αρχή :   

12 από 21 

 

Εικόνα 3.13  Στο σημείο αυτό θα δώσουμε σημεία κίνησης στην μπάλα :   Κάθε φορά που έχουμε υπολογίσει ένα σημείο για ένα αντικείμενο που θα κινηθεί, 

προσθέτουμε το σημείο στον πίνακα points. 

 

Εικόνα 3.14 

Σε κάθε κλήση προς drawScreen (), ζωγραφίζουμε το σύνολο των σημείων που έχουμε θέσει 

στον πίνακα points. Με λίγα λόγια αφήνουμε αποτυπώματα από τα σημεία που περάσαμε. 

Παίρνουμε και γράφουμε στο σημείο points[i],points[i].y x και σαν αποτύπωμα παίρνουμε από την εικόνα που έχουμε θέσει στο pointImage.scr δηλαδή την point.png , 4 χ 4 px και τα αφήνουμε κάθε φορά 

που φεύγουμε από το σημείο εκείνο 

 

Εικόνα 3.15 

13 από 21 

Τώρα που οι τιμές μας έχουν ενημερωθεί, εμείς απλά πρέπει να ζωγραφίσουμε την μπάλα στις x και y συντεταγμένες με βάση τις x και y ιδιότητες της μπάλας : 

  Έτσι ξανά ζωγραφίζουμε το κύκλο με την εντολή context.arc στο σημείο x=ball.x y=ball.y με radius=15 sAngle=0 και eAngle= Math.PI*2 για να είναι ολόκληρος ο κύκλος και counterclockwise=true δηλαδή δεξιόστροφο ρολόι. Έπειτα θέτουμε ένα χρώμα στο κύκλο. Συγκεκριμένα βάζοντας στην fillStyle = “#000000” θέτουμε το κύκλο σε μαύρο χρώμα και στην συνέχεια φτιάχνουμε ενα path ή αν υπάρχει του κανουμε reset. 

 Εικόνα 3.16   Έπειτα κλείνουμε το path και καλούμε την fill. fill() = stroke() ζωγραφίζουν στον καμβα.Είναι απαραίτητη ενέργεια μετά από την μέθοδο arc. 

 Εικόνα 3.17 

                 

14 από 21 

4 ­ Image Optimization Κώδικας : ./files/4 ­ Image Optimization/example2.html 

 Οι σύγχρονοι Η/Υ έχουν μεγάλη υπολογιστική ισχύ.Επίσης οι ταχύτητες του διαδικτύου όλο και αυξάνονται.Για αυτό το λόγο τώρα ποια είναι προτιμότερο όταν επισκεπτόμαστε μια σελίδα , οι εικόνες που περιέχει να είναι χαμηλής ποιότητας και η επεξεργασία της εικόνας να γίνεται στον Η/Υ του επισκέπτη.Όλη αυτή η διαδικασία ονομάζετε “Image Optimization”.  Στο παράδειγμα που ακολουθεί θα δούμε πως να προσθέσουμε μια εικόνα δυναμικά να της προσθέσουμε θόρυβο “Noise” και να της δώσουμε το εφέ της κίνησης.Σε Chrome ήθελε άλλες ρυθμίσεις το “Noise” και δε λειτουργεί. 

 

15 από 21 

Επεξήγηση κώδικα :  Αρχικά στο body βάζουμε ένα element  canvas και του ορίζουμε ένα μαύρο dotted πλαίσιο 5px.Του ορίζουμε id=”canvas” ώστε μέσω JavaScript και DOM να μπορούμε να έχουμε προσπέλαση σε αυτό το element.Τέλος του ορίζουμε 500px το ύψος και πλάτος του.  

 Εικόνα 4.1  

Στις γραμμές τέσσερα μέχρι επτά ορίζουμε πέντε global μεταβλητές.Στην μεταβλητή myCanvas ορίζει την αναφορά προς το element με ID “canvas”.Στην myContext ορίζει τις μεθόδους που έχει το αντικείμενο myCanvas ώστε να μπορέσουμε να τις χρησιμοποιήσουμε.Με την μεταβλητή fps(frames per secord) ορίζουμε το πόσο γρήγορα θα εμφανίζονται οι αλλαγές που γίνονται στον Canva.H μεταβλητή είναι μια εικόνα που της ορίζουμε το src με το String “rocket.png” που είναι όνομα εικόνας στον ίδιο φάκελο.Τέλος καλεί την μέθοδο loop().

 

 Εικόνα 4.2      

16 από 21 

Η μέθοδος loop() το μόνο που κάνει είναι να ορίζει έναν setInterval ο οποίος ως δεύτερο όρισμα δέχεται έναν αριθμό ο οποίος ορίζει το πόσο γρήγορα θα καλεί την μέθοδο που δέχεται ως πρώτο όρισμα.Αρχικά αυξάνει το “Υ” το i δηλαδή.  Έπειτα με την clearRect δημιουργεί ένα ορθογώνιο με διαστάσεις 500px πλάτος και ύψος και καθαρίζει όλων τον canva όπου οι δύο πρώτες παράμετροι ορίζουν από ποιο σημείο θα καθαρίζουν τον canva.  Επιπλέον η drawImage ζωγραφίζει την εικόνα spaceship στις εξής συντεταγμένες Χ=”180” Υ=”500­i” , στο Y βλέπουμε ότι αφαιρεί το i αυτό θα δώσει το εφέ της κίνησης.  Τέλος καλεί την addNoise με ως το πόσο “θόρυβο” θέλουμε να δώσουμε στην εικόνα.  

 Εικόνα 4.3  Με την σειρά της η addNoise ορίζει στην imageData ως εικόνα όλο τον canva. Έπειτα στην μεταβλητή pixels επιστρέφεται ο πίκανας που έχει η imageDate και περιέχει τιμές για τα pixels (χρώμα,βάθος,κ.α.).  Τέλος στην for προσθέτουμε τον θόρυβο στην εικόνα .Ορίζουμε το pixel[i] ίσο με ότι έχει ήδη το pixel[i] πολλαπλασιαζόμενο με έναν τυχαίο αριθμό που ο τυχαίος αριθμός εξαρτάται από το πόσο θόρυβο(alpha + alpha1) θέλουμε να προσθέσουμε στο pixel[i].   Τελικά για να φανεί το εφέ “θόρυβος” πρέπει να το προσθέσουμε στον canva με την μέθοδο putImageData. 

 

17 από 21 

5 ­ Canvas & Image Rotation 

   Λιγα Λογια : 

Είναι η περιστροφή ενός αντικείμενου στο χώρο ενος html canvas του οποίου οι αλλαγές είναι βασισμένες κυρίως στην γωνία περιστροφής η οποία βασίζεται σε ακτίνια καθώς και στο ρυθμό κίνησης που θα δώσουμε στον αλγόριθμο μας. 

Μπορούμε να περιστρέψουμε ένα αντικείμενο μόνο σε περίπτωση που έχει γίνει ήδη draw πάνω σε έναν καμβά. Δεν μπορούμε να περιστρέψουμε κάποιο το οποίο δε έχει ζωγραφιστεί στον καμβά της ιστοσελίδας μας. Για να γίνει περιστροφη η μέθοδος η οποία χρησιμοποιουμε ειναι η rotate(angle).Η μεταβλητη είναι η γωνία περιστροφής σε ακτίνια.Για παραδειγμα για να κάνω περιστροφη κατα  5 ακτίνια τοτε εκτελω  rotate(5*Math.PI/180).Σε αυτό το LINK μπορούμε να δούμε μερικά παραδείγματα Παράδειγμα 1.  Κώδικας : ./files/5 ­Canvas & Image Rotation/example4.html  Δηλώσεις μεταβλητων   Αρχικά συνδέουμε μια μεταβλητή της javascript με τoν <canvas> από το html document μας και παίρνουμε το context του στο οποίο και θα ζωγραφίσουμε. Έπειτα δηλώνουμε την μεταβλητή angle χωρίς να της δώσουμε τιμή καθώς κάθε φορά θα υπολογίζεται μέσα στον αλγόριθμο μας. 

    Εικόνα 5.1 

18 από 21 

Μία μέθοδος η οποία εκτελεί την πράξη μετατροπής ουσιαστικά της γωνίας μοιρών που βρισκόμαστε σε ακτίνια που θα μετακινηθεί το αντικείμενο μας στον χώρο του καμβά.  

   Εικόνα 5.2   Μία μέθοδος incrementAngle() η οποία κατά την κλήση της αυξάνει την τιμή angle κατά ένα και έπειτα ελέγχει αν έχει ξεπεράσει τις 360 μοίρες γωνία και την ξανά κάνει reset σε 0.   

 Εικόνα 5.3     Μία μέθοδος drawRandomlyColoredRectangle() η οποία θα διαχειρίζεται την όλη κατάσταση. 

Αρχικά αυτό που κάνει η μέθοδος είναι το να καθαρίζει το τοπίο του καμβά και συγκεκριμένα 

όλο το καμβά διότι τον καθαρίζει σε πλάτος = 1280 pixels και ύψος = 720 pixels όσο είναι και 

το συνολικό του μέγεθος. Έπειτα καλεί την μέθοδο incrementAngle() για να πάρει τιμή η γωνία 

μοιρών που βρισκόμαστε. 

    

   Εικόνα 5.4   Στην συνέχεια κάνουμε αποθηκεύσει το context του καμβά και θέτουμε την τιμή του πλάτους της γραμμής του περιγράμματος του σχήματος μας σε Pixels. Έπειτα καλώντας την εντολή translate δίνουμε 2 τιμές οι οποίες είναι και οι συντεταγμένες x,y όπου θα δημιουργηθεί κατά την ζωγραφική το επόμενο αντικείμενο που θα γράψουμε στο καμβά μας. Επομένως το 

19 από 21 

τετράγωνο μας θα βγαίνει κάθε φορά σε αυτές τις συντεταγμένες καθώς οι τιμές είναι σταθερές by value.   

 Εικόνα 5.5 ΣΤΕΛΝΟΥΜΕ ΤΟ ΣΧΗΜΑ ΣΤΟΝ ΚΑΜΒΑ   Αρχικά κάνουμε περιστροφή του σχήματος μας κατά τα ακτίνια που θα μας επιστρέψει η μέθοδος convertToRadians(angle) καθώς θέλουμε να φαίνονται εξαρχής οι αλλαγές. Έπειτα καλούμε την μέθοδο fillStyle με τιμή δυναμική κάθε φορά καθώς αντικατοπτρίζει το σύνολο όλων των χρωμάτων που υποστηρίζει το RGB και στην συνέχεια το δίνει στο συγκεκριμένο τετράγωνο.   

 Εικόνα 5.6 

  Στην συνέχεια καλούμε την fillRext η οποία ζωγραφίζει ένα γεμισμένο με χρώμα από 

την fillStyle ορθογώνιο καθώς οι διαστάσεις που δίνουμε 50 χ 50 θα πάρει στην ουσία την μορφή ενός τετραγώνου. Τα  x,y απλά θα μεταβάλουν την τιμή του translate η οποία έχει τεθεί για το επόμενο draw στον καμβά μας.  

 Εικόνα 5.7   Έπειτα κάνουμε strokeRect η οποία ζωγραφίζει ένα ορθογώνιο μη γεμισμένο με κενό στην μέση και στο ίδιο σημείο άλλα και πάλι με τις συγκεκριμένες διαστάσεις  τετράγωνο. Αυτός είναι ένας τρόπος για να φαίνονται τα χρώματα από το προηγούμενο σχήμα το οποίο θα βρίσκεται από κάτω .Τέλος η μέθοδος setInterval είναι αυτή που θα ξεκινήσει την όλη διαδικασία καθώς θα εκτελεστεί κατά το parse του κώδικα από τον browser και θα καλεί αυτόματα ανά 20Ms την μέθοδο drawRandomlyColoredRectangle και έτσι η διαδικασία θα επαναλαμβάνεται επαπειρον. 

   

20 από 21 

Bιβλιογραφία  

1. http://chimera.labs.oreilly.com/books/1234000001654/ch05.html#moving_in_a_straight_line 

2. https://developer.mozilla.org/en­US/docs/Web/API/Canvas_API/Tutorial/Basic_animations 

3. http://stackoverflow.com/questions/2677671/how­do­i­rotate­a­single­object­on­an­html­5­canvas 

4.      http://htmldog.com/guides/html/beginner/tags/ 5.      http://www.w3schools.com/tags/canvas_clearrect.asp 6.      http://www.w3schools.com/tags/canvas_beginpath.asp 7.      http://www.w3schools.com/tags/canvas_arc.asp 8.      https://www.youtube.com/watch?v=EjW72m­A4GI 9.      https://www.youtube.com/watch?v=5L9vCeNarDE 10. 

http://www.google.gr/books?hl=el&lr=&id=Mk3sW0on7OAC&oi=fnd&pg=PR5&dq=html5&ots=Cl5FHeGOoo&sig=PuE1ZwslViCA4r765dm6JQOWGH0&redir_esc=y#v=onepage&q&f=false 

11.  http://www.w3schools.com/html/html5_canvas.asp 12. 

https://dl.dropboxusercontent.com/u/5096013/demos/rotatedImages/rotations6.html 

13.  http://www.w3schools.com/tags/ref_canvas.asp  

21 από 21