HTML5 Canvas
- Προηγούμενη σελίδα Αντικειμενικές ιδιότητες των μορφωμάτων HTML
- Επόμενη σελίδα HTML5 SVG
Το στοιχείο canvas χρησιμοποιείται για τη ζωγραφική γραφημάτων στη σελίδα.
Τι είναι το Canvas;
Το στοιχείο canvas του HTML5 χρησιμοποιεί JavaScript για να ζωγραφίσει εικόνες στη σελίδα.
Το canvas είναι μια ορθογώνια περιοχή, μπορείτε να ελέγξετε κάθε πίξελ.
Το canvas έχει πολλά μέθοδους ζωγραφικής διαδρομών, ορθογώνιων, κύκλων, χαρακτήρων και προσθήκη εικόνων.
Δημιουργία στοιχείου Canvas
Προσθήκη στοιχείου canvas στην σελίδα HTML5.
Ορίζουμε το id, την πλάτος και το ύψος του στοιχείου:
<canvas id="myCanvas" width="200" height="100"></canvas>
Ζωγραφική μέσω JavaScript
Το στοιχείο canvas δεν έχει την ικανότητα να ζωγραφίσει. Όλες οι εργασίες ζωγραφικής πρέπει να ολοκληρωθούν εντός του JavaScript:
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
</script>
Το JavaScript χρησιμοποιεί το id για να βρει το στοιχείο canvas:
var c=document.getElementById("myCanvas");
Στη συνέχεια, δημιουργήστε το αντικείμενο context:
var cxt=c.getContext("2d");
Το αντικείμενο getContext("2d") είναι ένα ενσωματωμένο αντικείμενο HTML5 που διαθέτει διάφορες μεθόδους σχεδίασης διαδρομών, ορθογώνιων, κύκλων, χαρακτήρων και προσθήκης εικόνων.
Τα παρακάτω δύο γραμμές κώδικα σχεδιάζουν ένα κόκκινο ορθογώνιο:
cxt.fillStyle="#FF0000"; cxt.fillRect(0,0,150,75);
Η μέθοδος fillStyle το χρωματίζει σε κόκκινο, η μέθοδος fillRect καθορίζει τη μορφή, τη θέση και το μέγεθος.
Κατανόηση των συντεταγμένων
Ο τρόπος που χρησιμοποιείται η μεθόδος fillRect έχει παραμέτρους (0,0,150,75).
Αυτό σημαίνει ότι σχεδιάζετε ένα ορθογώνιο 150x75 από το πάνω αριστερό γωνιακό σημείο (0,0).
Ως φαίνεται στο παρακάτω σχήμα, οι συντεταγμένες X και Y του canvas χρησιμοποιούνται για τη τοποθέτηση των ζωγραφικών στο canvas.
Παράδειγμα: Αναγνωρίστε τις συντεταγμένες του ορθογώνιου όταν το ποντίκι βρίσκεται πάνω του
Περισσότερα Παραδείγματα Canvas
Περισσότερα παραδείγματα ζωγραφικής στο στοιχείο canvas:
Παράδειγμα - Γραμμή
Σχεδιάστε μια γραμμή καθορίζοντας το σημείο ξεκινήματος και το σημείο λήξης:
Κώδικας JavaScript:
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.moveTo(10,10);
cxt.lineTo(150,50);
cxt.lineTo(10,50);
cxt.stroke();
</script>
Στοιχείο canvas:
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> Ο περιηγητής σας δεν υποστηρίζει το στοιχείο canvas. </canvas>
Παράδειγμα - Κύκλος
Σχεδιάστε έναν κύκλο καθορίζοντας το μέγεθος, το χρώμα και τη θέση του:
Κώδικας JavaScript:
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.beginPath();
cxt.arc(70,18,15,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();
</script>
Στοιχείο canvas:
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> Ο περιηγητής σας δεν υποστηρίζει το στοιχείο canvas. </canvas>
Παράδειγμα - Διαφάνεια
Χρησιμοποιήστε το καθορισμένο από εσάς χρώμα για να σχεδιάσετε το διαφανές οπτικό υπόβαθρο:
Κώδικας JavaScript:
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var grd=cxt.createLinearGradient(0,0,175,50);
grd.addColorStop(0,"#FF0000");
grd.addColorStop(1,"#00FF00");
cxt.fillStyle=grd;
cxt.fillRect(0,0,175,50);
</script>
Στοιχείο canvas:
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> Ο περιηγητής σας δεν υποστηρίζει το στοιχείο canvas. </canvas>
Παράδειγμα - Εικόνα
Τοποθετήστε μια εικόνα στο καanvas:
Κώδικας JavaScript:
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img, 10, 10);
};
</script>
Στοιχείο canvas:
<canvas id="myCanvas" width="244" height="182" style="border:1px solid #d3d3d3;"> Ο περιηγητής σας δεν υποστηρίζει την ετικέτα canvas του HTML5. </canvas>
Εκμάθηση του HTML Canvas
Για να μάθετε περισσότερα για το καanvas, επισκεφθείτε το Εκμάθηση του HTML Canvas.
Σχετικές σελίδες
Εγχειρίδιο αναφοράς:Ετικέτα <canvas> του HTML 5
Εγχειρίδιο αναφοράς:Όνειρο HTML DOM Canvas
- Προηγούμενη σελίδα Αντικειμενικές ιδιότητες των μορφωμάτων HTML
- Επόμενη σελίδα HTML5 SVG
