[HTML5] εισαγωγή στο canvas

Ερωτήσεις και απαντήσεις σχετικές με την HTML, XHTML και την κατασκευή σελίδων για το Web.

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
Άβαταρ μέλους
cherouvim
Script Master
Δημοσιεύσεις: 3137
Εγγραφή: 13 Ιούλ 2005 22:56
Τοποθεσία: Athens, Greece
Επικοινωνία:

[HTML5] εισαγωγή στο canvas

Δημοσίευση από cherouvim » 20 Σεπ 2011 19:58

Η 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 &#123;
				margin&#58; 0;
				padding&#58; 0;
			&#125;
			canvas &#123;
				border&#58; 1px solid #777;
				margin&#58; 2em auto;
				display&#58; block;
			&#125;
			p.no-canvas &#123;
				color&#58; red;
				font-size&#58; 2em;
			&#125;
		</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 &#123;
				margin&#58; 0;
				padding&#58; 0;
			&#125;
			canvas &#123;
				border&#58; 1px solid #777;
				margin&#58; 2em auto;
				display&#58; block;
			&#125;
			p.no-canvas &#123;
				color&#58; red;
				font-size&#58; 2em;
			&#125;
		</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&#40;"demo"&#41;;
		</script>
	</body>
<html>
Μέσα σε ένα JavaScript block πιάσαμε το canvas και τώρα είμαστε έτοιμοι να ζωγραφίσουμε. Από εδώ και πέρα οι JavaScript εντολές ανήκουν σε αυτό το block.

Κώδικας: Επιλογή όλων

var context = canvas.getContext&#40;"2d"&#41;;
context.fillStyle = 'rgb&#40;255, 0, 0&#41;';
context.fillRect&#40;10, 10, 100, 50&#41;;
Από το 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&#40;&#41;;
context.moveTo&#40;100, 50&#41;;
context.lineTo&#40;200, 70&#41;;
context.stroke&#40;&#41;;
Το API για τις γραμμές είναι λίγο πιο πολύπλοκο. Αφού πούμε με τι χρώμα και πάχος θέλουμε να ζωγραφίσουμε του λέμε οτι ξεκινάμε ένα path. Στη συνέχεια μετακινούμε την έναρξη του path στο σημείο 100, 50 και κάνουμε γραμμή έως το 200, 70. Τέλος του λέμε να το ζωγραφίσει.
Εικόνα
Μέσα στο ίδιο path μπορούμε να κάνουμε πολλές γραμμές, είτε συνεχόμενες είτε ανεξάρτητες.

Κώδικας: Επιλογή όλων

context.strokeStyle = '#44ff88';
context.lineWidth = 4;
context.beginPath&#40;&#41;;
context.moveTo&#40;10, 200&#41;;
context.lineTo&#40;200, 200&#41;;
context.lineTo&#40;170, 300&#41;;
context.lineTo&#40;300, 290&#41;;
context.stroke&#40;&#41;;

context.strokeStyle = '#66bbdd';
context.lineWidth = 6;
context.beginPath&#40;&#41;;
context.moveTo&#40;300, 110&#41;;
context.lineTo&#40;340, 120&#41;;
context.moveTo&#40;300, 140&#41;;
context.lineTo&#40;350, 150&#41;;
context.moveTo&#40;300, 170&#41;;
context.lineTo&#40;370, 180&#41;;
context.moveTo&#40;300, 190&#41;;
context.lineTo&#40;390, 200&#41;;
context.stroke&#40;&#41;;
Εικόνα

Ας κάνουμε και μερικούς κύκλους.

Κώδικας: Επιλογή όλων

context.fillStyle = 'rgba&#40;255, 128, 255, 0.5&#41;';
context.beginPath&#40;&#41;;
context.arc&#40;100, 100, 30, 0, Math.PI*2, true&#41;;
context.closePath&#40;&#41;;
context.fill&#40;&#41;;

context.beginPath&#40;&#41;;
context.arc&#40;130, 100, 40, 0, Math.PI*2, true&#41;;
context.closePath&#40;&#41;;
context.fill&#40;&#41;;

context.beginPath&#40;&#41;;
context.arc&#40;160, 100, 50, 0, Math.PI*2, true&#41;;
context.closePath&#40;&#41;;
context.fill&#40;&#41;;
Εικόνα
Εδώ έχουμε 3 ανεξάρτητους κύκλους και βλέπουμε και την ωραία επίδραση του 50% transparency που βάλαμε για χρώμα.

Αυτά για την ώρα.
Πλήρες API έχει στο http://www.whatwg.org/specs/web-apps/cu ... as-element και ένα cheat sheet στο http://simon.html5.org/dump/html5-canva ... sheet.html

Κάποια canvas demos που έχω φτιάξει τα οποία έχουν animation και interaction με το mouse:
- http://temp.cherouvim.com/forums/canvas ... mo-13.html
- http://temp.cherouvim.com/forums/canvas ... mo-15.html
- http://temp.cherouvim.com/forums/canvas ... mo-16.html
Συνημμένα
canvas-demo.txt
sample code
(1.75 KiB) Μεταφορτώθηκε 416 φορές

Άβαταρ μέλους
greekbytes
WebDev Moderator
Δημοσιεύσεις: 2438
Εγγραφή: 15 Νοέμ 2002 15:42
Τοποθεσία: Αθήνα
Επικοινωνία:

[HTML5] εισαγωγή στο canvas

Δημοσίευση από greekbytes » 22 Σεπ 2011 12:28

Πολύ καλό το tutorial και τα demos :)

Άβαταρ μέλους
skeftomilos
Script Master
Δημοσιεύσεις: 2888
Εγγραφή: 07 Ιαν 2005 07:22
Τοποθεσία: Αθήνα

[HTML5] εισαγωγή στο canvas

Δημοσίευση από skeftomilos » 06 Οκτ 2011 00:43

Καλό το tutorial αλλά ακόμα καλύτερα τα demos. Εντελώς ουάου, ειδικά το δεύτερο και το τρίτο!

Άβαταρ μέλους
cordis
Administrator, [F|H]ounder, [C|S]EO
Δημοσιεύσεις: 27630
Εγγραφή: 09 Οκτ 1999 03:00
Τοποθεσία: Greece
Επικοινωνία:

[HTML5] εισαγωγή στο canvas

Δημοσίευση από cordis » 06 Οκτ 2011 01:10

ναι, το τρίτο πολύ καλό! για να δούμε, θα φτιάξει κανείς άλλος τίποτα με html5;
Δεν απαντάω σε προσωπικά μηνύματα με ερωτήσεις που καλύπτονται από τις ενότητες του forum. Για ο,τι άλλο είμαι εδώ για εσάς.
- follow me @twitter

Άβαταρ μέλους
burnmind
Script Master
Δημοσιεύσεις: 954
Εγγραφή: 26 Σεπ 2009 02:14
Τοποθεσία: UK
Επικοινωνία:

[HTML5] εισαγωγή στο canvas

Δημοσίευση από burnmind » 06 Οκτ 2011 20:38

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

Μερικές από τις ωραίες δημιουργίες που είδα σε ένα event προχθες:

http://agent8ball.com/
http://www.pirateslovedaisies.com/
http://disneydigitalbooks.go.com/tron/

(via @gisardo)

Στο twitter του θα βρείτε μερικά ακόμα παραδείγματα, έβαλα αυτά που μου άρεσαν περισσότερο.

Άβαταρ μέλους
Cypriot
Δημοσιεύσεις: 355
Εγγραφή: 20 Οκτ 2009 15:43

[HTML5] εισαγωγή στο canvas

Δημοσίευση από Cypriot » 07 Οκτ 2011 20:53

γιατί μου δείχνει αντί τα images αυτό; http://imageshack.us/img/blocked_login.jpg

Άβαταρ μέλους
cordis
Administrator, [F|H]ounder, [C|S]EO
Δημοσιεύσεις: 27630
Εγγραφή: 09 Οκτ 1999 03:00
Τοποθεσία: Greece
Επικοινωνία:

[HTML5] εισαγωγή στο canvas

Δημοσίευση από cordis » 07 Οκτ 2011 21:03

πρέπει να είναι οκ τώρα. ;)
Δεν απαντάω σε προσωπικά μηνύματα με ερωτήσεις που καλύπτονται από τις ενότητες του forum. Για ο,τι άλλο είμαι εδώ για εσάς.
- follow me @twitter

Άβαταρ μέλους
greekbytes
WebDev Moderator
Δημοσιεύσεις: 2438
Εγγραφή: 15 Νοέμ 2002 15:42
Τοποθεσία: Αθήνα
Επικοινωνία:

[HTML5] εισαγωγή στο canvas

Δημοσίευση από greekbytes » 13 Οκτ 2011 14:16

Άλλο ένα καλό άρθρο + demos:

Create a Drawing App with HTML5 Canvas and JavaScript
http://www.williammalone.com/articles/c ... awing-app/

Άβαταρ μέλους
gvarth
Δημοσιεύσεις: 155
Εγγραφή: 02 Αύγ 2006 11:02
Τοποθεσία: Μαρούσι
Επικοινωνία:

[HTML5] εισαγωγή στο canvas

Δημοσίευση από gvarth » 09 Δεκ 2011 20:18

Εξαιρετική δουλειά !
Αγαπάς το δάσος ; Αγαπάς τη θάλασσα ; Τότε αγαπάς και τη ζωή ...

:: Το ιστολόγιό μου :: :: Υπολογιστικά εργαλεία για μηχανικούς ::

Serghio
Δημοσιεύσεις: 452
Εγγραφή: 08 Φεβ 2011 19:20
Τοποθεσία: Περιστέρι

[HTML5] εισαγωγή στο canvas

Δημοσίευση από Serghio » 17 Δεκ 2011 21:05

H ερώτηση είναι η εξής:

Ποιός ο λόγος ύπαρξης του canvas αν μπορούμε να δημιουργήσουμε κάτι με την χρήση ενός photoshop, illustrator και να το εισάγουμε κατόπιν στο markup. κλπ.

Τι εξυπηρετεί δηλαδή ακριβώς η χρήση του στην HTML5?

Είναι μια εύλογη απορία που έχω καιρό.

Προφανώς κάπου θα εξυπηρετεί. Πού όμως;

Άβαταρ μέλους
Khronos
Δημοσιεύσεις: 754
Εγγραφή: 11 Δεκ 2006 14:43
Τοποθεσία: Ηράκλειο

[HTML5] εισαγωγή στο canvas

Δημοσίευση από Khronos » 17 Δεκ 2011 21:14

Αν διαβάσεις λίγο και δεις και τα παραδείγματα θα καταλάβεις.

panosru
WebDev Moderator
Δημοσιεύσεις: 1885
Εγγραφή: 13 Σεπ 2005 16:13
Τοποθεσία: Camp

[HTML5] εισαγωγή στο canvas

Δημοσίευση από panosru » 21 Δεκ 2011 05:37

Δε με τράβηξαν τα trailers της ταινίας, αλλά τώρα που είδα αυτό το html5 comic θα φροντίσω αύριο ν' αφιερώσω χρόνο να δω τη ταινία :P

και όσον αφορά αυτά:
είναι ο λόγος που κάνω post στις 5:35 τα ξημερώματα :P είχα σκοπό να κοιμηθώ από τις 4! :P

Απάντηση

Επιστροφή στο “HTML και XHTML”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 1 επισκέπτης