Αντικείμενο fillStyle του HTML canvas

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

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

fillStyle Ορισμός ή επιστροφή της τιμής της ιδιότητας που καθορίζει ή επιστρέφει το χρώμα, τη διαμίξις ή το μοτίβο γεμίσματος του σχεδίου.

Παράδειγμα

Παράδειγμα 1

Ορισμός ορθογώνιου γεμισμένου με μπλε:

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

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#0000ff";
ctx.fillRect(20,20,150,100);

Δοκιμάστε το προσωπικά

Συμβουλή:Περισσότερα παραδείγματα σελίδας κάτω από.

Γραμματική

context.fillStyle=χρώμα|διαμίξις|μοτίβο;

Τιμή προπρέπει

Τιμή Περιγραφή
χρώμα Σημαίνει το χρώμα γεμίσματος σχεδίου Χρώματα CSS.Προεπιλεγμένη τιμή είναι #000000.
διαμίξις Όντας αντικείμενο διαμίξις για το γεμίσιμο σχεδίων (γραμμικήήρωδία)
μοτίβο Όντας αντικείμενο μοτίβου για το γεμίσιμο σχεδίων

Τεχνικά λεπτομέρειες

Προεπιλεγμένη τιμή: #000000

Περισσότερα παραδείγματα

Παράδειγμα 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(1,"white");
ctx.fillStyle=my_gradient;
ctx.fillRect(20,20,150,100);

Δοκιμάστε το προσωπικά

Παράδειγμα 4

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

Ο περιηγητής σας δεν υποστηρίζει την ετικέτα 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);

Δοκιμάστε το προσωπικά

Παράδειγμα 5

Χρησιμοποιούμενη εικόνα:

λάμπα

Χρήση εικόνων για να γεμίσουν το σχέδιο:

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

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("lamp");
var pat=ctx.createPattern(img,"repeat");
ctx.rect(0,0,150,100);
ctx.fillStyle=pat;
ctx.fill();

Δοκιμάστε το προσωπικά

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

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

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

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