Canvas shadowOffsetX ominaisuus
määrittely ja käyttö
shadowOffsetX
ominaisuusasetus tai palauttaa muodon ja varjon horisontaalisen etäisyyden.
shadowOffsetX=0
Merkitsee, että varjo sijaitsee muodon oikealla puolellashadowOffsetX=20
Merkitsee, että varjo sijaitsee muodon left-sijainnin oikealla puolella 20 kuvapistettäshadowOffsetX=-20
Merkitsee, että varjo sijaitsee muodon left-sijainnin vasemmalla puolella 20 kuvapistettä
Vinkki:Jos haluat säätää varjon vertikaalisen sijainnin muodon suhteen, käytä shadowOffsetY ominaisuudet
esimerkki
Riisuta suorakulmion, jolla on oikealle suuntautunut varjo 20 kuvapistettä (suorakulmion left-sijainnista):
JavaScript:
var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.shadowBlur=10; ctx.shadowOffsetX=20; ctx.shadowColor="black"; ctx.fillStyle="blue"; ctx.fillRect(20,20,100,80);
syntaksi
context.shadowOffsetX=number;
ominaisuusarvo
arvo | kuvaus |
---|---|
number | Positiivinen tai negatiivinen arvo määrittää varjostuksen ja muodon horisontaalisen etäisyyden. |
Tekninen yksityiskohta
Oletusarvo: | 0 |
---|
Selaimen tuki
Taulukossa olevat numerot osoittavat ensimmäisen version, joka tukee kyseistä ominaisuutta.
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ä.