Εκπαιδευτικός Οδηγός Σημειώσεων Canvas HTML

Εκπαιδευτικός Οδηγός Σημειώσεων Canvas HTML

Η ετικέτα HTML <canvas> χρησιμοποιείται για την δυναμική σχεδίαση γραφημάτων μέσω κώδικα (συνήθως JavaScript).

Για περισσότερες πληροφορίες σχετικά με το <canvas>, διαβάστε το κύκλο οδηγιών μας για το HTML Canvas.

Χρώματα, στυλ και σκιά

Ιδιότητες Περιγραφή
fillStyle Ρυθμίζετε ή επιστρέφετε το χρώμα, τη διαβάθμιση ή το μοτίβο για την πλήρωση
strokeStyle Ρυθμίζετε ή επιστρέφετε το χρώμα, τη διαβάθμιση ή το μοτίβο για το μπρούτζο
shadowColor Ρυθμίζετε ή επιστρέφετε το χρώμα της σκιάς
shadowBlur Ρυθμίζετε ή επιστρέφετε το επίπεδο θολότητας της σκιάς
shadowOffsetX Ρυθμίζετε ή επιστρέφετε την οριζόντια απόσταση της σκιάς από τη μορφή
shadowOffsetY Ρυθμίζετε ή επιστρέφετε την οριζόντια απόσταση της σκιάς από τη μορφή
Μέθοδος Περιγραφή
createLinearGradient() Δημιουργείτε μια οριζόντια διαβάθμιση (χρησιμοποιείται στο περιεχόμενο του καμβά)
createPattern() Επαναλαμβάνετε τον καθορισμένο στοιχείο στον καθορισμένο κατεύθυνση
createRadialGradient() Δημιουργείτε μια ακτινική/κυκλική διαβάθμιση (χρησιμοποιείται στο περιεχόμενο του καμβά)
addColorStop() Ορίζετε τα χρώματα και τις θέσεις διακοπής του χρώματος στον αντικείμενο της διαβάθμισης

Στυλ γραμμής

Ιδιότητες Περιγραφή
lineCap Ρυθμίζετε ή επιστρέφετε τον τύπο τελικής άκρης της γραμμής
lineJoin Ρυθμίζετε ή επιστρέφετε τον τύπο κόμβου που δημιουργείται όταν δύο γραμμές συναντώνται
lineWidth Ρυθμίζετε ή επιστρέφετε το πλάτος της γραμμής
miterLimit Ρυθμίζετε ή επιστρέφετε τη μέγιστη μήκος της κλίσης

Τριγωνική περιοχή

Μέθοδος Περιγραφή
rect() Δημιουργείτε τριγωνική περιοχή
fillRect() Σχεδιάζετε τριγωνική περιοχή που είναι γεμάτη
strokeRect() Σχεδιάζετε τριγωνική περιοχή (χωρίς πλήρωμα)
clearRect() Διαγράφετε τα καθορισμένα像素 εντός της δοθείσας τριγωνικής περιοχής

Διαδρομή

Μέθοδος Περιγραφή
fill() Πληρώνονται τα τρέχοντα σχέδια (διαδρομή)
stroke() Σχεδιάζετε τη διαδρομή που έχει οριστεί
beginPath() Ξεκινάτε μια διαδρομή ή επαναφέρετε τη τρέχουσα διαδρομή
moveTo() Μετακινείτε τη διαδρομή στον καθορισμένο σημείο του καμβά χωρίς να δημιουργείτε γραμμή
closePath() Δημιουργείτε μια διαδρομή που επιστρέφει από το σημείο που βρίσκεται στον καμβά στον αρχικό σημείο
lineTo() Προσθέτετε έναν νέο σημείο και δημιουργείτε μια γραμμή από αυτό το σημείο μέχρι τον καθορισμένο σημείο στο καμβά
clip() Από το αρχικό καμβά κόβετε περιοχές οποιασδήποτε μορφής και μεγέθους
quadraticCurveTo() Δημιουργία δυοδιάστατης καμπύλης Bezier
bezierCurveTo() Δημιουργία τρισδιάστατης καμπύλης Bezier
arc() Δημιουργία καμπύλης/ακτίνας (για τη δημιουργία κύκλων ή μερών κύκλων)
arcTo() Δημιουργία καμπύλης/ακτίνας μεταξύ δύο ταγμένων
isPointInPath() Επιστροφή true αν ο καθορισμένος πόντος βρίσκεται στο τρέχοντα δρομολόγιο, αλλιώς επιστροφή false

Μετασχηματισμός

Μέθοδος Περιγραφή
scale() Αύξηση ή μείωση του μεγέθους του τρέχοντος πλέγματος ζωγραφικής
rotate() Ροπή του τρέχοντος πλέγματος ζωγραφικής
translate() Μεταφορά της θέσης (0,0) του πλέγματος ζωγραφικής
transform() Αντικατάσταση του τρέχοντος πλέγματος μετασχηματισμού ζωγραφικής
setTransform() Επαναφορά του τρέχοντος μετασχηματισμού σε μονάδα πλέγματος. Στη συνέχεια εκτελέστε transform()

Κείμενο

Ιδιότητες Περιγραφή
font Ρύθμιση ή επιστροφή των τρέχοντων ιδιοτήτων γραμματοσειράς του κειμένου
textAlign Ρύθμιση ή επιστροφή της τρέχουσας προσαρμογής του κειμένου
textBaseline Ρύθμιση ή επιστροφή της τρέχουσας γραμμής βάσης που χρησιμοποιείται για τη ζωγραφική κειμένου
Μέθοδος Περιγραφή
fillText() Δημιουργία
strokeText() Δημιουργία κειμένου στην επιφάνεια ζωγραφικής χωρίς πλήρωμα
measureText() Επιστροφή αντικειμένου που περιέχει το πλάτος του καθορισμένου κειμένου

Εικόνα ζωγραφικής

Μέθοδος Περιγραφή
drawImage() Δημιουργία εικόνας, επιφάνειας ζωγραφικής ή βίντεο στην επιφάνεια ζωγραφικής

Εργασίες με像素

Ιδιότητες Περιγραφή
width Επιστροφή του πλάτους του αντικειμένου ImageData
height Επιστροφή της ύψους του αντικειμένου ImageData
data Επιστροφή ενός αντικειμένου που περιέχει τα δεδομένα εικόνας του καθορισμένου αντικειμένου ImageData
Μέθοδος Περιγραφή
createImageData() Δημιουργία νέου, κενό αντικείμενο ImageData
getImageData() Επιστροφή του αντικειμένου ImageData, το οποίο είναι αντιγραφή των δεδομένων εικόνας στην επιφάνεια ζωγραφικής
putImageData() Επανεισαγωγή των δεδομένων εικόνας (από το καθορισμένο αντικείμενο ImageData) στην επιφάνεια ζωγραφικής

Σύνθεση

Ιδιότητες Περιγραφή
globalAlpha Ρύθμιση ή επιστροφή του τρέχοντος αλφα ή διαφανούς τιμή του σκηνικού
globalCompositeOperation Ρύθμιση ή επιστροφή του τρόπου που το νέο εικόνα θα χρωματιστεί στο υπάρχον εικόνα

Άλλα

Μέθοδος Περιγραφή
save() Αποθήκευση του τρέχοντος καταστάτη του περιβάλλοντος
restore() Επιστροφή του προηγούμενου καταστάτη και των ιδιοτήτων του διαδρόμου που αποθηκεύτηκαν
createEvent() 　
getContext() 　
toDataURL()