Canvas strokeStyle eigenschap

Canvas reference manual

Definitie en gebruik

strokeStyle Property instellen of retourneren van de kleur, gradient of patroon voor de pen.

Voorbeeld

Voorbeeld 1

Teken een rechthoek. Gebruik een blauwe penkleur:

Uw browser ondersteunt de canvas tag niet.

JavaScript:

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

Probeer het zelf

Syntax

context.strokeStyle=color|gradient|pattern;

Eigenschapswaarde

Waarde Beschrijving
color Geef de kleur van de pen aan voor de tekening CSS kleurwaarde）。Standaardwaarde is #000000。
gradient Het object dat wordt gebruikt om een gradient te vullen in de tekening (LineairofRadiant）。
pattern Het object dat wordt gebruikt om een pattern pen te maken.

Technische details

Standaardwaarde: #000000

Meer voorbeelden

Voorbeeld 2

Teken een rechthoek. Gebruik een gradient pen:

Uw browser ondersteunt de canvas tag niet.

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");
// Vul met een gradient
ctx.strokeStyle=gradient;
ctx.lineWidth=5;
ctx.strokeRect(20,20,150,100);

Probeer het zelf

Voorbeeld 3

Schrijf de tekst "codew3c.com" met een gradient pen:

Uw browser ondersteunt de canvas tag niet.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Verdana";
// Maak een gradient aan
var gradient=ctx.createLinearGradient(0,0,c.width,0);
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","red");
// Vul met een gradient
ctx.strokeStyle=gradient;
ctx.strokeText("Big smile!",10,50);

Probeer het zelf

Browserondersteuning

De cijfers in de tabel vermelden de versie van de browser die de eigenschap volledig ondersteunt.

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.

Canvas reference manual