Canvas strokeStyle-ominaisuus
Määrittely ja käyttö
strokeStyle Asettaa tai palauttaa kynän väriä, gradienttia tai mallia.
Esimerkki
Esimerkki 1
Piirrä nelikulmio. Käytä sinistä kynänväriä:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.strokeStyle="#0000ff";
ctx.strokeRect(20,20,150,100);
Syntaksi
context.strokeStyle=color|gradient|pattern;
Ominaisuuden arvo
| Arvo | Kuvaus |
|---|---|
| color | Merkitsee piirtojen kynän väriä CSS-väriarvo。Oletusarvo on #000000。 |
| gradient | Grafiikan täyttämiseen käytettävä gradientti-objekti (LineaarinenTaiRadioaktiivinen)。 |
| pattern | Pattern-kynän luomiseen käytettävä pattern-objekti. |
Tekninen yksityiskohta
| Oletusarvo: | #000000 |
|---|
Lisää esimerkkejä
Esimerkki 2
Piirrä nelikulmio. Käytä gradienttikynää:
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");
// Käytä väriä gradientilla täyttämiseen
ctx.strokeStyle=gradient;
ctx.lineWidth=5;
ctx.strokeRect(20,20,150,100);
Esimerkki 3
Kirjoita teksti "codew3c.com" värikkäällä gradientilla:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Verdana";
// Luo gradientti
var gradient=ctx.createLinearGradient(0,0,c.width,0);
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","red");
// Käytä väriä gradientilla täyttämiseen
ctx.strokeStyle=gradient;
ctx.strokeText("Big smile!",10,50);
Selaimen tuki
Taulukon numerot merkitsevät ensimmäisen täysin tukevan kyseisen ominaisuuden selaimen version.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Huomautus:Internet Explorer 8 ja aikaisemmat versiot eivät tue <canvas>-elementtiä.
