Canvas strokeStyle egenskap

Canvas referencer

Definisjon og bruk

strokeStyle Egenskapssett eller returnerer farge, gradient eller mønster for tegnings penn.

Eksempel

Eksempel 1

Tegn et rektangel. Bruk blå farge som pennfarge:

Din nettleser støtter ikke canvas-merket.

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;

Egenskapsverdi

Verdi Beskrivelse
color Indikerer tegnings pennfarge CSS-fargeverdi）。Standardverdien er #000000。
gradient Gradientobjektet brukt til å fylle tegning (LinearellerRadiell）。
pattern Pattern-objektet brukt til å opprette mønster penn.

Teknisk detalj

Standardverdi: #000000

Flere eksempler

Eksempel 2

Tegn et rektangel. Bruk en gradient penn:

Din nettleser støtter ikke canvas-merket.

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);

Prøv det selv

Eksempel 3

Skriv teksten "codew3c.com" med en gradient penn:

Din nettleser støtter ikke canvas-merket.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Verdana";
// Opprett 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("Big smile!",10,50);

Prøv det selv

Nettleserstøtte

Tallene i tabellen angiver den første nettleserversjonen som fullt ut støtter denne egenskapen.

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.

Canvas referencer