Μέθοδος createRadialGradient() του HTML canvas

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

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

createLinearGradient() Μέθοδος δημιουργίας αντικειμένων ακτινοειδούς/κυκλικής διαφάνειας.

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

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

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

Παράδειγμα

Δημιουργήστε ένα τετράγωνο και γεμίστε το με ακτινοειδή/κυκλική διαφάνεια:

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

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var grd=ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// Γεμίστε με διαφάνεια
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,100);

Δοκιμάστε το شخصικά

Γλώσσα

context.createRadialGradient(x0,y0,r0,x1,y1,r1);

Τιμή παράμετρου

Παράμετροι Περιγραφή
x0 Κοординά x του αρχικού κύκλου της διαφάνειας
y0 Κοординά y του αρχικού κύκλου της διαφάνειας
r0 Απόσταση από το κέντρο του κύκλου (αρχική)
x1 Κοординά x του τέλους της διαφάνειας
y1 Κоординά y του τέλους της διαφάνειας
r1 Απόσταση από το κέντρο του κύκλου

Υποστήριξη προγράμματος περιήγησης

Τα αριθμήματα στη τάβλη αναφέρονται στην έκδοση του προγράμματος περιήγησης που υποστηρίζει πλήρως την ιδιότητα.

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