Το αντικείμενο Canvas Ιδιότητες και μέθοδοι

Slides:



Advertisements
Παρόμοιες παρουσιάσεις
Εργαστήριο 17 Εκπαιδευτικό Εργαστήριο Πληροφορικής Χειμερινό Εξάμηνο 2006 Οικονομικό Πανεπιστήμιο Αθηνών Τμήμα Διοικητικής Επιστήμης & Τεχνολογίας.
Advertisements

Πίνακες.
Sketchpad Χρήση του λογισμικού ΕΠΙΜΟΡΦΩΣΗ ΕΚΠΑΙΔΕΥΤΙΚΩΝ ΣΤΗΝ ΧΡΗΣΗ ΚΑΙ
H Εξέλιξη της HTML και η ετικέτα. Εξέλιξη της Html 2 Internet Είναι ένα ξεχωριστό μέσο δημοσίευσης πληροφοριών... Είναι ένα ξεχωριστό μέσο δημοσίευσης.
Δ.Π.Θ. Επεξεργασία Κειμένου - 1 Επεξεργασία Κειμένου Ένα πρόγραμμα σε γλώσσα HTML είναι ανεξάρτητο της μηχανής όπου θα εκτελεστεί. Δηλαδή αγνοούνται τα.
ΥΠΟΛΟΓΙΣΤΙΚΑ ΦΥΛΛΑ (EXCEL)
Επεξεργασία Κειμένου Ονομ/νυμο Επιμορφωτή Επιμορφωτής: Ονομ/νυμο Επιμορφωτή ΥΠΕΠΘ ΠΑΙΔΑΓΩΓΙΚΟ ΙΝΣΤΙΤΟΥΤΟ ΠΡΟΓΡΑΜΜΑ «ΚΟΙΝΩΝΙΑ ΤΗΣ ΠΛΗΡΟΦΟΡΙΑΣ» ΕΠΙΜΟΡΦΩΣΗ.
Logo Κεφάλαιο 6.
Το λογισμικό Αράχνη Το λογισμικό αυτό είναι ένα πρωτότυπο λογισμικό για την εκμάθηση του προγραμματισμού στις μικρές ηλικίες Δημοτικό και Γυμνάσιο. Υποστηρίζει.
Πάντειο Πανεπιστήμιο Κοινωνικών και Πολιτικών Επιστημών ΠΜΣ Δυνητικές κοινότητες Μάθημα: Εισαγωγικά Θέματα W.W.W. CSS CASCADING STYLE SHEETS ΑΠΟΔΟΣΗ ΕΚΦΡΑΣΤΙΚΟΥ.
CSS Cascading Style Sheets
Ομάδα Β: Επεξεργασία πειραματικών δεδομένων
Επιμορφωτής: Δρίμτζιας Βασίλης
Επεξεργασία Κειμένου Ονομ/νυμο Επιμορφωτή Επιμορφωτής: Ονομ/νυμο Επιμορφωτή ΥΠΕΠΘ ΠΑΙΔΑΓΩΓΙΚΟ ΙΝΣΤΙΤΟΥΤΟ ΠΡΟΓΡΑΜΜΑ «ΚΟΙΝΩΝΙΑ ΤΗΣ ΠΛΗΡΟΦΟΡΙΑΣ» ΕΠΙΜΟΡΦΩΣΗ.
Πως βάζουμε τίτλους και κείμενα στα video μας σε 8 βήματα.
Επιμορφωτής: Ονομ/νυμο Επιμορφωτή
Διαχείριση αντικειμένων ΠΡΟΓΡΑΜΜΑ ΕΠΙΜΟΡΦΩΣΗΣ ΣΥΝΤΑΞΗ ΕΓΓΡΑΦΩΝ ΜΕ ΕΠΕΞΕΡΓΑΣΤΕΣ ΚΕΙΜΕΝΟΥ.
ΤΗΣ ΦΟΙΤΗΤΡΙΑΣ : ΤΣΑΛΤΑ ΑΝΑΣΤΑΣΙΑ Α.Μ. : 30920
CSS – Cascading Style Sheets (Ιδιότητες κειμένου - text)
Ιστοσελίδες -- Web-site. Εισαγωγή Στατικές ιστοσελίδες Δυναμικές ή Διαδραστικές ιστοσελίδες:  Ο τρόπος παρουσίασης και τα περιεχόμενά της ιστοσελίδας.
Τα Διαδοχικά Φύλλα Στυλ CSS
Microsoft PowerPoint Powerpoint Κίκα Χρυσοστόμου.
ΣΤΟΧΟΙ: ΓΡΑΜΜΑΤΑ ΚΑΙ ΑΡΙΘΜΟΙ
Microsoft PowerPoint Powerpoint Κίκα Χρυσοστόμου.
ΕΙΔΗ ΓΡΑΜΜΩΝ-ΓΡΑΜΜΑΤΑ ΚΑΙ ΑΡΙΘΜΟΙ
Microsoft Excel 4.6 Γραφήματα
HTML5 Λυμπούδης Μάτε. Η Ιστορία της HTML Η Ιστορία της HTML5  Η ανάπτυξη της ξεκίνησε το 2004 από μέλη της Apple, της Mozilla Foundation και της Opera.
CSS – Cascading Style Sheets (Φύλλα επάλληλων στυλ) Κανόνες που καθορίζουν τη μορφή και τη διάταξη των στοιχείων των σελίδων (X)HTML Σκοπός είναι ο διαχωρισμός.
«Υλοποίηση παρουσίασης στo PowerPoint»
Applets Εκμεταλλεύονται τo γραφικό υπόβαθρο που παρέχουν οι browsers, έχοντας έτσι τη δυνατότητα προβολής γραφικών και τη δυνατότητα υλοποίησης ενός γραφικού.
CSS – Cascading Style Sheets (Εξωτερική γραμμή, περιθώριο, ενδιάμεση απόσταση) Η εξωτερική γραμμή (outline) σχεδιάζεται γύρω από ένα στοιχείο της HTML,
Microsoft PowerPoint Powerpoint Κίκα Χρυσοστόμου.
Microsoft Excel 4.3 Διαχείριση Φύλλων Εργασίας Κίκα Χρυσοστόμου.
CSS – Cascading Style Sheets (Το μοντέλο box) Κάθε στοιχείο της HTML περιέχεται σε ένα “κουτί” (box). Το μοντέλο box μας βοηθάει στο σχεδιασμό της ιστοσελίδας.
CSS – Cascading Style Sheets (Ιδιότητες φόντου - background) Καθορίζουν το φόντο των στοιχείων της HTML Χρώμα φόντου Φόντο εικόνας (τοποθέτηση εικόνας,
1Κεφάλαιο 4 Κανόνες Σύνταξης HTML Όλες οι ετικέτες εσωκλείονται μεταξύ των χαρακτήρων “ “. Κάθε τι που βρίσκεται μεταξύ των χαρακτήρων “ ”, αποτελεί σχόλιο.
Βασικά στοιχεία της Java
Εφαρμογές Πολυμέσων: Εισαγωγή στην HTML (1)
HTML 3. Στόχος της ώρας Απαιτήσεις XHTML 1.0 Strict Ιδιότητα title HTML Entities Ετικέτα label Favicon «Κακές» ιδιότητες Παραδείγματα.
ΠΡΙΝ ΞΕΚΙΝΗΣΟΥΜΕ Πράγματα που αξιολογείτε θετικά σε σχέση με το μάθημα του προηγούμενου τετραμήνου Πράγματα που θα μπορούσαν να βελτιωθούν.
Ακαδημαϊκό έτος Εργαστήριο Προγραμματισμού και Επεξεργασίας Πληροφοριών Εισαγωγή στην γλώσσα SVG Αλεξ Καράκος.
Μάθημα 9 Λίγο απ’ όλα! HTML 5 Advanced PHP XML. HTML 5 Πρόκειται για μια νέα έκδοση της HTML που συμπληρώνει τις δυνατότητες της γλώσσας με κάποια Tags.
ΠΛΗΡΟΦΟΡΙΚΗ Ι Τμήμα Λογιστικής ΤΕΙ Κρήτης Γιάννης Χρυσάκης
HTML/CSS: Εισαγωγή Θερινό Σχολείο, 14 – 20 Ιουλίου 2014 Γιώργος Φουρτούνης Μονάδα Αριστείας ΕΛ/ΛΑΚ ΤΕΙ Αθήνας.
Ειδικά Θέματα στον Προγραμματισμό Υπολογιστών
Μάθημα 6 Μετασχηματισμοί στο αντικείμενο Canvas. Μετασχηματισμοί / transforms Method Περιγραφή scale()Κλιμάκωση. Το τρέχον σχέδιο γίνεται μεγαλύτερο ή.
Αρχές Πληροφορικής Ενότητα # 13: Επεξεργασία κειμένου – LibreOffice #3
Το αντικείμενο Canvas Ιδιότητες και μέθοδοι Μέρος Β’
Ανάπτυξη Εκπαιδευτικού Λογισμικού
Αρχές Πληροφορικής Ενότητα # 12: Επεξεργασία κειμένου – LibreOffice #2
Ανάπτυξη Εκπαιδευτικού Λογισμικού
Αρχές Πληροφορικής Ενότητα # 11: Επεξεργασία κειμένου - LibreOffice
ΚΑΜΠΥΛΕΣ ΣΤΟ ΕΠΙΠΕΔΟ ΚΑΙ ΣΤΟ ΧΩΡΟ
Κεφαλαιο 11 ΕΙΣΑΓΩΓΗ ΣΤΗΝ HTML.
Ανάπτυξη Εκπαιδευτικού Λογισμικού
Το αντικείμενο Canvas Βίντεο
Αρχές Πληροφορικής Ενότητα # 3: Το εσωτερικό του υπολογιστή
International Hospitality Management MC Employability Scheme
ΣΧΕΔΙΑΣΗ ΓΡΑΦΙΚΩΝ ΜΑΘΗΜΑ 3Ο.
HTML - CSS Δίνεται παρακάτω ο κώδικας HTML μιας ιστοσελίδας
Ανάπτυξη Εκπαιδευτικού Λογισμικού
Γραφικές Μέθοδοι Σχεδιασμού με Η-Υ Εκπαιδευτικό Παράδειγμα 2
ΚΑΝΟΝΑΣ 1 Ο Αγωνιστικός Χώρος.
Τρόπος προσαρμογής του Microsoft SharePoint Τοποθεσία Web με σύνδεση
Γ6.4 Μορφοποίηση Πινάκων και Πρωτεύον Κλειδί
Ανάπτυξη Εκπαιδευτικού Λογισμικού
θέμα δήλωση Γραφικό SmartArt με εικόνες σε κόκκινο φόντο
Η Ιστοσελίδα της Α΄ Τάξης Αυτή η πολύ απλή σελίδα είναι φτιαγμένη
ΣΤΟΧΟΙ: ΓΡΑΜΜΑΤΑ ΚΑΙ ΑΡΙΘΜΟΙ
Λογισμικό Εφαρμογών/Επεξεργασία Εικόνας
Μεταγράφημα παρουσίασης:

Το αντικείμενο 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);