Το αντικείμενο Canvas Ιδιότητες και μέθοδοι Μάθημα 3 Το αντικείμενο Canvas Ιδιότητες και μέθοδοι
Σύνταξη του αντικειμένου <!DOCTYPE html> <html> <body> <canvas id="myCanvas" width="200" height="100" style="border:3px solid #0000ff;"> Δυστυχώς δεν έχετε HTML5 φυλλομετρητή!!! </canvas> </body> </html>
Γενικές ιδιότητες Attribute Περιγραφή accesskey κλειδί για να εστιάσει ένα στοιχείο class όνομα της κλάσης για ένα στοιχείο contenteditable επεξεργάσιμο ή όχι contextmenu μενού εμφανίζεται με δεξί κλικ στο στοιχείο Data Τοπικά προσαρμοσμένα δεδομένα dir κατεύθυνση του κειμένου draggable draggable ή όχι dropzone αν σέρνονται δεδομένα τότε τι γίνεται αντιγραφή, μετακίνηση, ή σύνδεση hidden Απόκρυψη id μοναδικό αναγνωριστικό lang γλώσσα του περιεχομένου
Γενικές ιδιότητες spellcheck ορθογραφία και τη γραμματική ελέγχονται ή δεν style Γραμμή CSS style tabindex Σειρά στα διαδοχικά tab title Τίτλος translate να μεταφραστεί ή όχι height Ύψος καμβά width πλάτος καμβά
Colors, Styles, and Shadows Property Περιγραφή fillStyle Ορίζει ή επιστρέφει το χρώμα, κλίση, ή μοτίβο που χρησιμοποιείται για να γεμίσει το σχέδιο strokeStyle Ορίζει ή επιστρέφει το χρώμα, κλίση, ή μοτίβο που χρησιμοποιείται για την χάραξη γραμμών shadowColor Ορίζει ή επιστρέφει το χρώμα που θα χρησιμοποιηθεί για τις σκιές shadowBlur Ορίζει ή επιστρέφει το επίπεδο διάχυσης για σκιές shadowOffsetX Ορίζει ή επιστρέφει την οριζόντια απόσταση από τη σκιά από το σχήμα shadowOffsetY Ορίζει ή επιστρέφει την κάθετη απόσταση από τη σκιά από το σχήμα
παράδειγμα <!DOCTYPE html> <html> <body> <canvas id="myCanvas" width="300" height="150”> Your browser does not support the HTML5 canvas tag.</canvas> <script> var c=document.getElementById("myCanvas"); var contx=c.getContext("2d"); contx.fillStyle="#FF0000"; contx.fillRect(20,20,150,100); </script> </body> </html>
var c=document. getElementById("myCanvas"); var contx=c var c=document.getElementById("myCanvas"); var contx=c.getContext("2d"); contx.strokeStyle="#FF0000"; contx.strokeRect(20,20,150,100); var c=document.getElementById("myCanvas"); var =c.getContext("2d"); contx.shadowBlur=10; contx.shadowColor=“grey"; contx.fillStyle=“green"; contx.fillRect(20,30,100,80);
Υφές χρωμάτων Method Περιγραφή createLinearGradient() Δημιουργεί μια γραμμική μεταβολή χρώματος (για χρήση σε περιεχόμενο καμβά) createPattern() Επαναλαμβάνει μια συγκεκριμένη μορφολογία στην καθορισμένη κατεύθυνση createRadialGradient() Δημιουργεί μια ακτινική / κυκλική μεταβολή χρώματος (για χρήση σε περιεχόμενο καμβά) addColorStop() Καθορίζει όρια του χρώματος σε ένα gradient βάψιμο
Παραδείγματα var c=document.getElementById("myCanvas"); var contx=c.getContext("2d"); var grd=contx.createLinearGradient(0,0,170,0); grd.addColorStop(0,"black"); grd.addColorStop(1,"red"); contx.fillStyle=grd; contx.fillRect(20,20,150,150); var c=document.getElementById("myCanvas"); var contx=c.getContext("2d"); var img=document.getElementById(“theImage"); var pat=contx.createPattern(img,"repeat"); contx.rect(0,0,150,100); contx.fillStyle=pat; contx.fill();
Line / Rectangles Property Περιγραφή lineCap Ορίζει ή επιστρέφει το στυλ που έχουν οι τάπες για μια γραμμή (πχ butt round square κλπ) lineJoin Ορίζει ή επιστρέφει τον τύπο της γωνίας που δημιουργείται, όταν συναντώνται δύο γραμμές lineWidth Ορίζει ή επιστρέφει το τρέχον πλάτος της γραμμής miterLimit Ορίζει ή επιστρέφει το μέγιστο μήκος μίτρα Method Περιγραφή rect() Δημιουργεί ένα ορθογώνιο fillRect() Σχεδιάζει ένα "γεμάτο" ορθογώνιο strokeRect() Σχεδιάζει ένα ορθογώνιο (όχι πλήρωσης) clearRect() Καθαρίζει τα συγκεκριμένα pixels σε δεδομένο ορθογώνιο
Παραδείγματα var c=document.getElementById("myCanvas"); var contx=c.getContext("2d"); contx.beginPath(); contx.lineJoin="round"; //"bevel|round|miter"; contx.moveTo(10,10); contx.lineTo(100,50); contx.lineTo(20,100); contx.stroke(); var c=document.getElementById("myCanvas"); var contx=c.getContext("2d"); contx.fillRect(10,10,100,100); var c=document.getElementById("myCanvas"); var contx=c.getContext("2d"); contx.strokeRect(20,20,100,100);
Paths Method Περιγραφή fill() Γεμίζει το τρέχον σχέδιο (διαδρομή) stroke() Στην πραγματικότητα εφιστά την πορεία που έχετε ορίσει beginPath() Αρχίζει μια διαδρομή, ή να επαναφέρει την τρέχουσα διαδρομή moveTo() Μετακινεί τη διαδρομή προς το καθορισμένο σημείο στον καμβά, χωρίς να δημιουργεί μια γραμμή closePath() Δημιουργεί μια διαδρομή από το τρέχον σημείο πίσω στο σημείο εκκίνησης lineTo() Προσθέτει ένα νέο σημείο και δημιουργεί μια γραμμή από το σημείο αυτό μέχρι την τελευταία καθορισμένο σημείο στον καμβά
Paths clip() Κλιπ μια περιοχή από οποιοδήποτε σχήμα και μέγεθος από το αρχικό καμβά quadraticCurveTo() Δημιουργεί μια τετραγωνική καμπύλη Bézier bezierCurveTo() Δημιουργεί μια κυβική καμπύλη Bézier arc() Δημιουργεί ένα τόξο / καμπύλη (που χρησιμοποιούνται για να δημιουργήσουν κύκλους, ή τμήματα των κύκλων) arcTo() Δημιουργεί ένα τόξο / καμπύλη μεταξύ δύο εφαπτόμενες isPointInPath() Επιστρέφει true αν το συγκεκριμένο σημείο είναι το τρέχον μονοπάτι, αλλιώς false
Παραδειγματα var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); context.lineWidth = 10; context.strokeStyle = "red"; context.moveTo(100, canvas.height - 50); // βλέπε σχήμα που εξηγεί την συνάρτηση quadraticCurveTo context.quadraticCurveTo(canvas.width / 2, -50, canvas.width - 100, canvas.height - 50); context.stroke();
Παραδείγματα var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); context.lineWidth = 10; context.strokeStyle = “green“; context.moveTo(20, 20); context.bezierCurveTo(150, 10, 200, 10, 200, 100); context.stroke(); cp1x The x-coordinate of the first Bézier control point cp1y The y-coordinate of the first Bézier control point cp2x The x-coordinate of the second Bézier control point cp2y The y-coordinate of the second Bézier control point P3 x The x-coordinate of the ending point P3 y The y-coordinate of the ending point
Μετασχηματισμοί context.setTransform(a,b,c,d,e,f); Method Περιγραφή scale() Κλιμάκωση. Το τρέχον σχέδιο γίνεται μεγαλύτερο ή μικρότερο rotate() Περιστρέφει το τρέχον σχέδιο translate() Επαναθέτει το (0,0) θέση στον καμβά transform() Αντικαθιστά την τρέχουσα μήτρα μετασχηματισμού για το σχέδιο setTransform() Θέτει μήτρα μετασχηματισμού. context.setTransform(a,b,c,d,e,f); a Scales the drawings horizontally b Skews the drawings horizontally c Skews the drawings vertically d Scales the drawings vertically e Moves the the drawings horizontallyy f Moves the the drawings vertically contx.fillStyle="yellow"; contx.fillRect(0,0,250,100) contx.setTransform(1,0.5,-0.5,1,30,10); contx.fillStyle="red"; contx.fillRect(0,0,250,100);
Text Property Περιγραφή font Ορίζει ή επιστρέφει τις τρέχουσες ιδιότητες γραμματοσειράς για το περιεχόμενο του κειμένου textAlign Ορίζει ή επιστρέφει την τρέχουσα ευθυγράμμιση για το περιεχόμενο του κειμένου textBaseline Ορίζει ή επιστρέφει το ρεύμα γραμμής βάσης κειμένου που χρησιμοποιούνται κατά την επεξεργασία κειμένου Method Περιγραφή fillText() "γεμίζουν" το κείμενο στον καμβά strokeText() Χαράσσει κείμενο στον καμβά (χωρίς γέμισμα) measureText() Επιστρέφει ένα αντικείμενο που περιέχει το πλάτος του καθορισμένου κειμένου
παραδείγματα context.font = "40pt Calibri"; context.fillStyle = "black"; context.textAlign = "center"; context.textBaseline = "middle"; context.fillText("Hello World!", canvas.width / 2, 120);