HTML canvas strokeStyle Eigenschaft
Definition und Verwendung
strokeStyle Eigenschaftsstellung oder Rückgabe der Farbe, des Gradienten oder des Musters für den Stift.
Beispiel
Beispiel 1
Zeichnen Sie ein Rechteck. Verwenden Sie eine blaue Stiftfarbe:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.strokeStyle="#0000ff";
ctx.strokeRect(20,20,150,100);
Syntax
context.strokeStyle=color|gradient|pattern;
Attributwert
| Wert | Beschreibung |
|---|---|
| color | Zeigt die Farbe des Zeichnungspens an CSS-Farbwerte.Standardwert ist #000000. |
| gradient | Verwendet, um ein Gradient zu füllen, das die Zeichnung füllt ObjektLinearoderRadioaktiv) |
| pattern | Verwendet, um ein Musterstift zu erstellen pattern Objekt |
Technische Details
| Standardwert: | #000000 |
|---|
Mehr Beispiele
Beispiel 2
Zeichnen Sie ein Rechteck. Verwenden Sie einen Farbfeldstift:
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");
// Fill with gradient
ctx.strokeStyle=gradient;
ctx.lineWidth=5;
ctx.strokeRect(20,20,150,100);
Beispiel 3
Schreiben Sie den Text "codew3c.com" mit einem Farbfeldstift:
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");
// Fill with gradient
ctx.strokeStyle=gradient;
ctx.strokeText("Big smile!",10,50);
Browser Support
The numbers in the table indicate the first browser version that fully supports this property.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Note:Internet Explorer 8 and earlier versions do not support the <canvas> element.
