Canvas fillStyle ιδιότητα

Εγχειρίδιο 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=color|gradient|pattern;

Τιμή του χαρακτηριστικού

Τιμή Περιγραφή
color Δείχνει το χρώμα πλήρωμα ζωγραφικής CSS χρωματική τιμή). Η προεπιλεγμένη τιμή είναι #000000.
gradient Το αντικείμενο gradient που χρησιμοποιείται για το πλήρωμα της ζωγραφικής (LinearήΡαδιογενής)
pattern Το αντικείμενο pattern που χρησιμοποιείται για το πλήρωμα της ζωγραφικής.

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

Προεπιλεγμένη τιμή: #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

Η εικόνα που χρησιμοποιείται:

λάμπα

Χρήση εικόνας για το πλήρωμα της εικονικής ζωγραφικής:

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

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

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

Εγχειρίδιο Canvas