HTML canvas createPattern() -menetelmä
Määrittely ja käyttö
createPattern() Metodi toistaa määritetyn elementin määritetyssä suunnassa.
Elementti voi olla kuva, video tai muu <canvas> -elementti.
Toistettavat elementit voidaan käyttää reunojen ja täytettävien suorakulmion, ympyrän tai viivan piirtämiseen jne.
Esimerkki
Käytetty kuva:
Toista kuvaa horisontaalisesti ja vertikaalisesti:
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");
Muuttujien arvot
| Muuttujat | Kuvaus |
|---|---|
| image | Määritellään käytettävä kuva, kanvas tai videoelementti. |
| repeat | Oletus. Tämä tila toistuu sekä vaakasuunnassa että pystysuunnassa. |
| repeat-x | Tämä tila toistuu vain vaakasuunnassa. |
| repeat-y | Tämä tila toistuu vain pystysuunnassa. |
| no-repeat | Tämä tila näyttää kerran (ei toistu). |
Selaintuki
Taulukossa olevat numerot mainitsevat ensimmäisen version, joka tukee tätä ominaisuutta täysin.
| 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ä.
