Canvas strokeStyle ιδιότητα

Εγχειρίδιο Canvas

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

strokeStyle Η ιδιότητα strokeStyle ρυθμίζει ή επιστρέφει το χρώμα, τη διαχρωμιά ή το μοτίβο της πινέλου.

Παράδειγμα

Παράδειγμα 1

Δημιουργία ορθογώνιου. Χρησιμοποιήστε το μπλε χρώμα πινέλου:

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

JavaScript:

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

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

Γλώσσα

context.strokeStyle=color|gradient|pattern;

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

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

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

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

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

Παράδειγμα 2

Δημιουργία ορθογώνιου. Χρησιμοποιήστε διαχρωμιά πινέλου:

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

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var gradient=ctx.createLinearGradient(0,0,170,0);
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","red");
// Πληρώστε με διαχρωμιά
ctx.strokeStyle=gradient;
ctx.lineWidth=5;
ctx.strokeRect(20,20,150,100);

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

Παράδειγμα 3

Γράψτε το κείμενο "codew3c.com" με μια διαχρωμιά πινέλου:

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

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Verdana";
// Δημιουργία διαχρωμιάς
var gradient=ctx.createLinearGradient(0,0,c.width,0);
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","red");
// Πληρώστε με διαχρωμιά
ctx.strokeStyle=gradient;
ctx.strokeText("Big smile!",10,50);

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

Υποστήριξη περιηγητή

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

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

Εγχειρίδιο Canvas