Anastasis 48 Report post Posted November 8, 2016 Η HTML5 μας έφερε το element canvas για το οποίο και θα κάνουμε μία μικρή εισαγωγή εδώ. Το canvas στο HTML μας γράφεται έτσι: κώδικας: <canvas /> και ουσιαστικά δεν κάνει και πολλά πράγματα από μόνο του. Χρειάζεται να το εντοπίσουμε (όπου βρίσκεται μέσα στο DOM) και να το επεξεργαστούμε μέσω JavaScript. Ουσιαστικά το canvas είναι ένας καμβάς (ας πούμε τελάρο ζωγραφικής) και μας δίνει ένα API για να κάνουμε πράγματα πάνω του. Συγκεκριμένα μας επιτρέπει να ζωγραφίσουμε, αλλά και να ρωτήσουμε για τιμές χρωμάτων που έχει πάνω του. Το παράδειγμα προυποθέτει το εξής βασικό HTML: κώδικας: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style> body { margin: 0; padding: 0; } canvas { border: 1px solid #777; margin: 2em auto; display: block; } p.no-canvas { color: red; font-size: 2em; } </style> </head> <body> <canvas width="500" height="400" id="demo"><p class="no-canvas">no canvas support</p></canvas> </body> <html> Για όσους δεν έχουν ξαναδεί HTML5, to DOCTYPE (η πρώτη γραμμή πάνω) μπορεί να φανεί περίεργη και λιτή. Είναι το DOCTYPE του HTML5 και μπορούμε άφοβα να το χρησιμοποιούμε από τώρα. Οπότε δηλώνουμε ένα απλό σκελετό HTML με ένα μόνο element (το canvas) στο οποίο έχουμε πει οτι θέλουμε περιβάλλον ζωγραφικής μεγέθους 500x400 pixels. Αυτό δηλώνεται πάνω στο element μέσω HTML (ή JavaScript) ως παράμετροι του, και όχι ως δηλώσεις στο CSS. Αν το βάζαμε στο CSS τότε η ενεργή περιοχή ζωγραφικής δεν θα μεγάλωνε σε αριθμό pixels αλλά ως εμφάνιση (δηλαδή απλά θα έκανε zoom/"ξεzoom"). Τέλος, το περιεχόμενο του canvas είναι ένα κομμάτι HTML το οποίο θα εμφανιστεί στους browsers που δεν υποστηρίζουν canvas. Οπότε πχ στον IE6 θα εμφανιστεί ένα <p> με ανάλογο μήνυμα και class για να στυλάρουμε από το CSS. Με αυτό το βασικό setup το μόνο που βλέπουμε είναι ένα κεντραρισμένο πλαίσιο στο browser διαστάσεων 500x400. Αφού έχουμε το βασικό setup πρέπει να εντοπίσουμε το canvas μας μέσω JavaScript για να μπορούμε να κάνουμε πράγματα. κώδικας: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style> body { margin: 0; padding: 0; } canvas { border: 1px solid #777; margin: 2em auto; display: block; } p.no-canvas { color: red; font-size: 2em; } </style> </head> <body> <canvas width="500" height="400" id="demo"><p class="no-canvas">no canvas support</p></canvas> <script type="text/javascript"> var canvas = document.getElementById("demo"); </script> </body> <html> Μέσα σε ένα JavaScript block πιάσαμε το canvas και τώρα είμαστε έτοιμοι να ζωγραφίσουμε. Από εδώ και πέρα οι JavaScript εντολές ανήκουν σε αυτό το block. κώδικας: var context = canvas.getContext("2d"); context.fillStyle = 'rgb(255, 0, 0)'; context.fillRect(10, 10, 100, 50); Από το canvas παίρνουμε ένα context. Το περιβάλλον δηλαδή με το οποίο θα αλληλεπιδράμε. Προσέξτε τη παράμετρο "2d" που μας λέει οτι θέλουμε το δισδιάστατο περιβάλλον. Υπάρχει και "3d" για όποιους browsers το υποστηρίζουν. Στη συνέχεια πάνω στο context δηλώνουμε το fillStyle δηλαδή το χρώμα με το οποίο θα βάψουμε. Αυτό γίνεται με διάφορους τρόπους όπως ακριβώς και στο CSS. Δηλαδή θα μπορούσαμε να πούμε 'red' ή '#ff0000' ή και 'rbga(255, 0, 0, 0.5)' αν θέλουμε transparency. Τέλος βάφουμε τετράγωνη επιφάνεια που ορίζεται από το πάνω αριστερά σημείο 10, 10 στο κάτω δεξιά 100, 50. Ας κάνουμε και μερικές γραμμές. Το canvas είναι δικό μας και κάνουμε ότι θέλουμε (όπως έλεγε και ο Bob Ross). κώδικας: context.strokeStyle = 'blue'; context.lineWidth = 10; context.beginPath(); context.moveTo(100, 50); context.lineTo(200, 70); context.stroke(); Το API για τις γραμμές είναι λίγο πιο πολύπλοκο. Αφού πούμε με τι χρώμα και πάχος θέλουμε να ζωγραφίσουμε του λέμε οτι ξεκινάμε ένα path. Στη συνέχεια μετακινούμε την έναρξη του path στο σημείο 100, 50 και κάνουμε γραμμή έως το 200, 70. Τέλος του λέμε να το ζωγραφίσει. Μέσα στο ίδιο path μπορούμε να κάνουμε πολλές γραμμές, είτε συνεχόμενες είτε ανεξάρτητες. κώδικας: context.strokeStyle = '#44ff88'; context.lineWidth = 4; context.beginPath(); context.moveTo(10, 200); context.lineTo(200, 200); context.lineTo(170, 300); context.lineTo(300, 290); context.stroke(); context.strokeStyle = '#66bbdd'; context.lineWidth = 6; context.beginPath(); context.moveTo(300, 110); context.lineTo(340, 120); context.moveTo(300, 140); context.lineTo(350, 150); context.moveTo(300, 170); context.lineTo(370, 180); context.moveTo(300, 190); context.lineTo(390, 200); context.stroke(); Ας κάνουμε και μερικούς κύκλους. κώδικας: context.fillStyle = 'rgba(255, 128, 255, 0.5)'; context.beginPath(); context.arc(100, 100, 30, 0, Math.PI*2, true); context.closePath(); context.fill(); context.beginPath(); context.arc(130, 100, 40, 0, Math.PI*2, true); context.closePath(); context.fill(); context.beginPath(); context.arc(160, 100, 50, 0, Math.PI*2, true); context.closePath(); context.fill(); Εδώ έχουμε 3 ανεξάρτητους κύκλους και βλέπουμε και την ωραία επίδραση του 50% transparency που βάλαμε για χρώμα. Αυτά για την ώρα. Πλήρες API έχει στο http://www.whatwg.org/specs/web-apps/current-work/multipage/the-can...he-canvas-element και ένα cheat sheet στο http://simon.html5.org/dump/html5-canvas-cheat-sheet.html Κάποια canvas demos που έχω φτιάξει τα οποία έχουν animation και interaction με το mouse: - http://temp.cherouvim.com/forums/canvas/jc-canvas-demo-13.html - http://temp.cherouvim.com/forums/canvas/jc-canvas-demo-15.html - http://temp.cherouvim.com/forums/canvas/jc-canvas-demo-16.html canvas-demo.txt Description: sample code Download Filename: canvas-demo.txt Filesize: 1.75 KB Downloaded: 382 Time(s) Quote Share this post Link to post Share on other sites
