Εισαγωγή στην Javascript - Μάθημα #5
Γραφικά SVG σε HTML με JS
Τα σχέδια SVG μπορούν να ενσωματωθούν σε μια HTML ιστοσελίδα, μπορεί να είναι δυναμικά και διαδραστικά και μπορούν να προγραμματιστούν σε JavaScript.
ΠΑΡΑΔΕΙΓΜΑ #5.1:
<!DOCTYPE html>
<html>
<body>
<p>Σχεδίαση κύκλων με SVG:</p>
<svg height="200" width="200">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
<circle cx="110" cy="50" r="40" stroke="black" stroke-width="3" fill="none" />
<circle cx="50" cy="150" r="40"
style="fill:blue;stroke:black;stroke-width:5;opacity:0.5" />
<circle cx="110" cy="150" r="40"
style="fill:yellow;stroke:black;stroke-width:5;opacity:0.5" />
Ο φυλλομετρητής σου δεν υποστηρίζει ενσωμάτωση εικόνων SVG.
</svg>
</body>
</html>
<html>
<body>
<p>Σχεδίαση κύκλων με SVG:</p>
<svg height="200" width="200">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
<circle cx="110" cy="50" r="40" stroke="black" stroke-width="3" fill="none" />
<circle cx="50" cy="150" r="40"
style="fill:blue;stroke:black;stroke-width:5;opacity:0.5" />
<circle cx="110" cy="150" r="40"
style="fill:yellow;stroke:black;stroke-width:5;opacity:0.5" />
Ο φυλλομετρητής σου δεν υποστηρίζει ενσωμάτωση εικόνων SVG.
</svg>
</body>
</html>
Εισάγετε τις εντολές HTML στο γαλάζιο πλαίσιο.
Η ιστοσελίδα που αντιστοιχεί στις εντολές φαίνεται στο λευκό πλαίσιο πιο κάτω:
(Αρχικά δοκιμάστε να μεταφέρετε όλες τις εντολές με ΑΝΤΙΓΡΑΦΗ-ΕΠΙΚΟΛΛΗΣΗ.
Στην συνέχεια μπορείτε να κάνετε αλλαγές και να δοκιμάσετε να αλλάξετε όπως θέλετε
την λειτουργικότητα του κάθε παραδείγματος.)
Προσομοίωση φωτεινού σηματοδότη με SVG και JavaScript.
ΠΑΡΑΔΕΙΓΜΑ #5.2:
ΠΑΡΑΔΕΙΓΜΑ #5.3:
ΑΣΚΗΣΗ #5.1: Δοκιμάστε να τροποποιήσετε το παράδειγμα #1 για να σχεδιαστούν οι ολυμπιακοί κύκλοι όπως φαίνεται στην εικόνα κάτω.
ΑΣΚΗΣΗ #5.3: Δοκιμάστε να τροποποιήσετε το παράδειγμα #3 τοποθετώντας το αστέρι μέσα σε ένα ορθογώνιο το οποίο θα μπορεί να αλλάξει χρώμα από μπλε σε κόκκινο.
ΠΑΡΑΔΕΙΓΜΑ #5.2:
<!DOCTYPE html>
<html>
<body>
<p>Σχεδίαση φωτεινού σηματοδότη με SVG.
<br> Πατώντας τα κουμπιά ανάβει το κάθε χρώμα:</p>
<svg height="280" width="140" style="display:block; margin-left:auto; margin-right:auto; width: 30%;">
<rect width="130" height="260" style="fill:black;stroke:black;stroke-width:5" />
<circle id="c1" cx="65" cy="50" r="40" style="fill:red;stroke:black;stroke-width:5;opacity:0.2" />
<circle id="c2" cx="65" cy="130" r="40" style="fill:yellow;stroke:black;stroke-width:5;opacity:0.2"/>
<circle id="c3" cx="65" cy="210" r="40" style="fill:lime;stroke:black;stroke-width:5;opacity:0.2" />
Ο φυλλομετρητής σου δεν υποστηρίζει ενσωμάτωση εικόνων SVG.
</svg>
<div style=" margin: auto; width: 40%;">
<button onclick="
document.getElementById('c1').style.opacity='1';
document.getElementById('c2').style.opacity='0.2';
document.getElementById('c3').style.opacity='0.2';
">
κόκκινο
</button>
<button onclick="
document.getElementById('c1').style.opacity='0.2';
document.getElementById('c2').style.opacity='1';
document.getElementById('c3').style.opacity='0.2';
">
κίτρινο
</button>
</button>
<button onclick="
document.getElementById('c1').style.opacity='0.2';
document.getElementById('c2').style.opacity='0.2';
document.getElementById('c3').style.opacity='1';
">
πράσινο
</button>
</div>
</body>
</html>
<html>
<body>
<p>Σχεδίαση φωτεινού σηματοδότη με SVG.
<br> Πατώντας τα κουμπιά ανάβει το κάθε χρώμα:</p>
<svg height="280" width="140" style="display:block; margin-left:auto; margin-right:auto; width: 30%;">
<rect width="130" height="260" style="fill:black;stroke:black;stroke-width:5" />
<circle id="c1" cx="65" cy="50" r="40" style="fill:red;stroke:black;stroke-width:5;opacity:0.2" />
<circle id="c2" cx="65" cy="130" r="40" style="fill:yellow;stroke:black;stroke-width:5;opacity:0.2"/>
<circle id="c3" cx="65" cy="210" r="40" style="fill:lime;stroke:black;stroke-width:5;opacity:0.2" />
Ο φυλλομετρητής σου δεν υποστηρίζει ενσωμάτωση εικόνων SVG.
</svg>
<div style=" margin: auto; width: 40%;">
<button onclick="
document.getElementById('c1').style.opacity='1';
document.getElementById('c2').style.opacity='0.2';
document.getElementById('c3').style.opacity='0.2';
">
κόκκινο
</button>
<button onclick="
document.getElementById('c1').style.opacity='0.2';
document.getElementById('c2').style.opacity='1';
document.getElementById('c3').style.opacity='0.2';
">
κίτρινο
</button>
</button>
<button onclick="
document.getElementById('c1').style.opacity='0.2';
document.getElementById('c2').style.opacity='0.2';
document.getElementById('c3').style.opacity='1';
">
πράσινο
</button>
</div>
</body>
</html>
ΠΑΡΑΔΕΙΓΜΑ #5.3:
<!DOCTYPE html>
<html>
<body>
<p>Σχεδίασε ένα αστέρι με SVG:</p>
<svg height="250" width="250" style="display:block; margin-left:auto; margin-right:auto; width: 40%;">
<circle id="s1" cx="120" cy="112" r="110" style="fill:brown;stroke:black;stroke-width:5;" />
<polygon id="s2" points="120,10 60,198 210,78 30,78 180,198"
fill-rule="nonzero" style="fill:lime;stroke:black;stroke-width:5;"/>
Ο φυλλομετρητής σου δεν υποστηρίζει ενσωμάτωση εικόνων SVG.
</svg>
<button onclick="
document.getElementById('s1').style.fill='blue';
document.getElementById('s2').style.fill='red';
">
αλλαγή χρωμάτων
</button>
<button onclick="
document.getElementById('s1').setAttribute('r', 60);
document.getElementById('s2').setAttribute('fill-rule', 'evenodd');
">
αλλαγή σχήματος
</button>
</body>
</html>
<html>
<body>
<p>Σχεδίασε ένα αστέρι με SVG:</p>
<svg height="250" width="250" style="display:block; margin-left:auto; margin-right:auto; width: 40%;">
<circle id="s1" cx="120" cy="112" r="110" style="fill:brown;stroke:black;stroke-width:5;" />
<polygon id="s2" points="120,10 60,198 210,78 30,78 180,198"
fill-rule="nonzero" style="fill:lime;stroke:black;stroke-width:5;"/>
Ο φυλλομετρητής σου δεν υποστηρίζει ενσωμάτωση εικόνων SVG.
</svg>
<button onclick="
document.getElementById('s1').style.fill='blue';
document.getElementById('s2').style.fill='red';
">
αλλαγή χρωμάτων
</button>
<button onclick="
document.getElementById('s1').setAttribute('r', 60);
document.getElementById('s2').setAttribute('fill-rule', 'evenodd');
">
αλλαγή σχήματος
</button>
</body>
</html>
ΑΣΚΗΣΗ #5.1: Δοκιμάστε να τροποποιήσετε το παράδειγμα #1 για να σχεδιαστούν οι ολυμπιακοί κύκλοι όπως φαίνεται στην εικόνα κάτω.
ΑΣΚΗΣΗ #5.2: Δοκιμάστε να τροποποιήσετε το παράδειγμα #1 για να σχεδιαστούν τα μάτια όπως φαίνεται στην εικόνα κάτω.Μπορείτε να τα κάνετε με το πάτημα κουμπιού να κοιτάνε αριστερά ή δεξιά;
ΑΣΚΗΣΗ #5.3: Δοκιμάστε να τροποποιήσετε το παράδειγμα #3 τοποθετώντας το αστέρι μέσα σε ένα ορθογώνιο το οποίο θα μπορεί να αλλάξει χρώμα από μπλε σε κόκκινο.
Δεν υπάρχουν σχόλια:
Δημοσίευση σχολίου