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:
JavaScript:
var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.strokeStyle="#0000ff"; ctx.strokeRect(20,20,150,100);
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:
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);
Eksempel 3
Skriv teksten "codew3c.com" med en gradientpen:
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);
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.