Μέθοδος createLinearGradient() του Canvas

Ορισμός και χρήση

createLinearGradient() Η μέθοδος δημιουργεί αντικείμενα διαβάθμισης γραμμικής.

Η διαβάθμιση μπορεί να χρησιμοποιηθεί για να γεμίσει ορθογώνια, κύκλους, γραμμές, κείμενα και πολλά άλλα.

Συμβουλή:Χρησιμοποιήστε το αντικείμενο ως strokeStyle ή fillStyle τιμή της ιδιότητας.

Συμβουλή:Χρησιμοποιήστε addColorStop() Η μέθοδος καθορίζει διαφορετικά χρώματα και πού τοποθετούνται αυτά στο αντικείμενο gradient.

Παράδειγμα

Δείτε επίσης:

Ορίστε μια διαβάθμιση από μαύρο σε λευκό (από αριστερά προς δεξιά) ως στυλ γεμίσματος του ορθογώνιου:

Το πρόγραμμα περιήγησής σας δεν υποστηρίζει την ετικέτα HTML5 canvas.

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

Ορίστε μια διαβάθμιση (από πάνω προς κάτω) ως στυλ γεμίσματος του ορθογώνιου:

Το πρόγραμμα περιήγησής σας δεν υποστηρίζει την ετικέτα canvas.

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

Ορίστε μια διαβάθμιση από μαύρο σε κόκκινο και στη συνέχεια σε λευκό ως στυλ γεμίσματος του ορθογώνιου:

Το πρόγραμμα περιήγησής σας δεν υποστηρίζει την ετικέτα canvas.

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>.