Canvas strokeStyle-egenskapen

Canvas referenshandbok

Definition och användning

strokeStyle Egenskapsvärde som anger eller returnerar färg, gradient eller mönster för dragning.

Exempel

Exempel 1

Rita en rektangel. Använd blått som dragningsfärg:

Din webbläsare stöder inte canvas-taggen.

JavaScript:

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

Prova själv

Syntaks

context.strokeStyle=color|gradient|pattern;

Egenskapsvärde

Värde Beskrivning
color Indikerar dragningens färg CSS-färgvärden）。Standardvärdet är #000000。
gradient Objekt som används för att fylla in dragningens gradient (LinjärellerRadiell）。
pattern Objekt som används för att skapa mönsterpenslar.

Tekniska detaljer

Standardvärde: #000000

Mer exempel

Exempel 2

Rita en rektangel. Använd en gradientpen:

Din webbläsare stöder inte canvas-taggen.

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

Prova själv

Exempel 3

Skriv texten "codew3c.com" med en gradientpen:

Din webbläsare stöder inte canvas-taggen.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Verdana";
// Skapa en gradient
var gradient=ctx.createLinearGradient(0,0,c.width,0);
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","red");
// Fyll med en gradient
ctx.strokeStyle=gradient;
ctx.strokeText("Stor leende!",10,50);

Prova själv

Webbläsarstöd

Tal i tabellen anger den första version av webbläsare som helt stöder detta egenskap.

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

Kommentar:Internet Explorer 8 och tidigare versioner stöder inte <canvas>-elementet.

Canvas referenshandbok