Canvas strokeStyle-Eigenschaft

Canvas-Referenzhandbuch

Definition und Verwendung

strokeStyle Eigenschaft setzt oder gibt die Farbe, den Farbverlauf oder das Muster für den Stift zurück.

Beispiel

Beispiel 1

Zeichnen Sie ein Rechteck. Verwenden Sie die blauere Stiftfarbe:

Ihr Browser unterstützt das Canvas-Tag nicht.

JavaScript:

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

Probieren Sie es selbst aus

Syntax

context.strokeStyle=color|gradient|Pattern;

Eigenschaftswert

Wert Beschreibung
color Indiziert die Farbe des Zeichnungspensels CSS-Farbe). Standardwert ist #000000.
gradient Objekt, das das Füllungsgrad-Objekt für die Zeichnung erstellt (LinearoderRadioaktiv)
Pattern Objekt, das das Pattern-Füllungsfarbe-Objekt erstellt.

Technische Details

Standardwert: #000000

Mehr Beispiele

Beispiel 2

Zeichnen Sie ein Rechteck. Verwenden Sie einen Farbverlauf-Stift:

Ihr Browser unterstützt das Canvas-Tag nicht.

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");
// Mit Farbverlauf füllen
ctx.strokeStyle=gradient;
ctx.lineWidth=5;
ctx.strokeRect(20,20,150,100);

Probieren Sie es selbst aus

Beispiel 3

Schreiben Sie den Text "codew3c.com" mit einem Farbverlauf-Stift:

Ihr Browser unterstützt das Canvas-Tag nicht.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Verdana";
// Farbverlauf erstellen
var gradient=ctx.createLinearGradient(0,0,c.width,0);
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","red");
// Mit Farbverlauf füllen
ctx.strokeStyle=gradient;
ctx.strokeText("Big smile!",10,50);

Probieren Sie es selbst aus

Browser-Unterstützung

Die Zahlen in der Tabelle weisen auf die erste Browser-Version hin, die diese Eigenschaft vollständig unterstützt.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

Anmerkung:Internet Explorer 8 und frühere Versionen unterstützen das <canvas>-Element nicht.

Canvas-Referenzhandbuch