Canvas createPattern() -metodi
määrittely ja käyttö
createPattern() Metodi toistaa määritetyn elementin määritetyssä suhteessa.
Elementti voi olla kuva, video tai muu <canvas> -elementti.
Toistuvat elementit voidaan käyttää reunaviivojen, ympyröiden tai viivojen piirtämiseen ja täyttämiseen jne.
esimerkki
Käytetty kuva:
Toista kuvaa sekä horisontaalisessa että vertikaalisessa suhteessa:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("lamp");
var pat=ctx.createPattern(img,"repeat");
ctx.rect(0,0,150,100);
ctx.fillStyle=pat;
ctx.fill();
syntaksi
context.createPattern(image,"repeat|repeat-x|repeat-y|no-repeat");
parametrien arvot
| parametrit | kuvaus |
|---|---|
| image | Määritä käytettävä kuva, taulukko tai videoelementti. |
| repeat | Oletus. Tämä malli toistuu sekä horisontaalisessa että vertikaalisessa suhteessa. |
| repeat-x | Tämä malli toistuu vain horisontaalisessa suhteessa. |
| repeat-y | Tämä malli toistuu vain pystysuunnassa. |
| no-repeat | Tämä malli näyttää kerran (ei toistu). |
Selaimen tuki
Taulukossa olevat numerot osoittavat ensimmäisen täysin tukevan 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ä.
