Μέθοδος HTML canvas createLinearGradient()

Εγχειρίδιο HTML5 Canvas

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

createLinearGradient() Η μέθοδος 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

Σημείωση:Οι εκδόσεις Internet Explorer 8 και παλιότερες δεν υποστηρίζουν το στοιχείο <canvas>.

Εγχειρίδιο HTML5 Canvas