Μέθοδος createLinearGradient() του Canvas
Ορισμός και χρήση
createLinearGradient()
Η μέθοδος δημιουργεί αντικείμενα διαβάθμισης γραμμικής.
Η διαβάθμιση μπορεί να χρησιμοποιηθεί για να γεμίσει ορθογώνια, κύκλους, γραμμές, κείμενα και πολλά άλλα.
Συμβουλή:Χρησιμοποιήστε το αντικείμενο ως strokeStyle ή fillStyle τιμή της ιδιότητας.
Συμβουλή:Χρησιμοποιήστε addColorStop() Η μέθοδος καθορίζει διαφορετικά χρώματα και πού τοποθετούνται αυτά στο αντικείμενο gradient.
Παράδειγμα
Δείτε επίσης:
Ορίστε μια διαβάθμιση από μαύρο σε λευκό (από αριστερά προς δεξιά) ως στυλ γεμίσματος του ορθογώνιου:
JavaScript:
var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); var grd=ctx.createLinearGradient(0,0,170,0); grd.addColorStop(0,"black"); grd.addColorStop(1,"white"); ctx.fillStyle=grd; ctx.fillRect(20,20,150,100);
Γλώσσα
context.createLinearGradient(x0,y0,x1,y1);
Αξία παράμετρου
Παράμετροι | Περιγραφή |
---|---|
x0 | Η συντεταγμένη x του σημείου έναρξης της διαβάθμισης. |
y0 | Η συντεταγμένη y του σημείου έναρξης της διαβάθμισης. |
x1 | Η συντεταγμένη x του σημείου τελικής διαβάθμισης. |
y1 | Η συντεταγμένη y του σημείου τελικής διαβάθμισης. |
Περισσότερα παραδείγματα
Παράδειγμα 2
Ορίστε μια διαβάθμιση (από πάνω προς κάτω) ως στυλ γεμίσματος του ορθογώνιου:
JavaScript:
var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); var my_gradient=ctx.createLinearGradient(0,0,0,170); my_gradient.addColorStop(0,"black"); my_gradient.addColorStop(1,"white"); ctx.fillStyle=my_gradient; ctx.fillRect(20,20,150,100);
Παράδειγμα 3
Ορίστε μια διαβάθμιση από μαύρο σε κόκκινο και στη συνέχεια σε λευκό ως στυλ γεμίσματος του ορθογώνιου:
JavaScript:
var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); var my_gradient=ctx.createLinearGradient(0,0,170,0); my_gradient.addColorStop(0,"black"); my_gradient.addColorStop(0.5,"red"); my_gradient.addColorStop(1,"white"); ctx.fillStyle=my_gradient; ctx.fillRect(20,20,150,100);
Υποστήριξη του προγράμματος περιήγησης
Τα αριθμήματα στη τаблицή δείχνουν την έκδοση του προγράμματος περιήγησης που υποστηρίζει πλήρως την ιδιότητα.
Chrome | Edge | Firefox | Safari | Opera |
---|---|---|---|---|
Chrome | Edge | Firefox | Safari | Opera |
4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Σημείωση:O Internet Explorer 8 και οι προηγούμενες εκδόσεις δεν υποστηρίζουν το στοιχείο <canvas>.