Canvas addColorStop() method
Ορισμός και χρήση
addColorStop() Ορίζει το χρώμα και τη θέση του αντικειμένου gradient.
Η μέθοδος addColorStop() με createLinearGradient() ή createRadialGradient() Συμπεριλαμβανομένων.
Σημείωση:Μπορείτε να καλέσετε πολλαπλές φορές τη μέθοδο addColorStop() για να αλλάξετε το διαμίγμα. Αν δεν χρησιμοποιήσετε τη μέθοδο αυτή στο αντικείμενο gradient, το διαμίγμα θα είναι μη ορατό. Για να κάνετε το διαμίγμα ορατό, χρειάζεται να δημιουργήσετε τουλάχιστον έναν σήμα.
Παράδειγμα
Παράδειγμα 1
Ορισμός μιας διαμίγματος από μαύρο σε λευκό ως τύπος γεμίσματος του ορθογώνιου:
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);
Συμβουλή:Περισσότερα παραδείγματα στην κορυφή της σελίδας.
Γλώσσα
gradient.addColorStop(stop,χρώμα);
Τιμή παράμετρου
| Παράμετροι | Περιγραφή |
|---|---|
| stop | Τιμή μεταξύ 0.0 και 1.0, που δείχνει τη θέση που βρίσκεται το ξεκίνημα και το τέλος του διαμίγματος. |
| χρώμα | Η τιμή του CSS χρώματος στην τελική θέση. |
Περισσότερα παραδείγματα
Παράδειγμα 2
Ορισμός της διαμίγματος μέσω πολλαπλών μεθόδων addColorStop():
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("0.3","magenta");
grd.addColorStop("0.5","blue");
grd.addColorStop("0.6","green");
grd.addColorStop("0.8","yellow");
grd.addColorStop(1,"red");
ctx.fillStyle=grd;
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>.
