HTML canvas strokeStyle-egenskab

Definering og brug

strokeStyle Indstiller eller returnerer farve, gradient eller mønster for tegningspen.

Eksempel

Eksempel 1

Tegn en rektangel. Brug en blå penfarve:

Din browser understøtter ikke canvas-tagget.

JavaScript:

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

Prøv det selv

Syntaks

context.strokeStyle=color|gradient|pattern;

Egenskabsværdi

Værdi Beskrivelse
color Indikerer tegningspens farve: CSS farveværdi. Standardværdi er #000000.
gradient Graduentobjektet brugt til at fylde tegning (LigneligtellerRadiel)
pattern Pattern-objektet brugt til at oprette mønsterpen:

Tekniske detaljer

Standardværdi: #000000

Flere eksempler

Eksempel 2

Tegn en rektangel. Brug en gradientpen:

Din browser understøtter ikke canvas-tagget.

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

Prøv det selv

Eksempel 3

Skriv teksten "codew3c.com" med en gradientpen:

Din browser understøtter ikke canvas-tagget.

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");
// Fyld med gradient
ctx.strokeStyle=gradient;
ctx.strokeText("Big smile!",10,50);

Prøv det selv

Browserstøtte

Tallene i tabellen angiver den første browserversion, der fuldt ud understøtter egenskaben.

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

Bemærk:Internet Explorer 8 og tidligere versioner understøtter ikke <canvas>-elementet.