HTML canvas strokeStyle χαρακτηριστικό

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

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

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

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