Kursrekommendation:
Definition och användning
createPattern() Metoden upprepar det specifika elementet inom angiven riktning.
Element kan vara bilder, videor eller andra <canvas>-element.
De upprepade elementen kan användas för att ritas/fylla rektanglar, cirklar eller linjer och så vidare.
Exempel
Använda bild:
Upprepa bild i både horisontell och vertikal riktning:
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();
Syntax
context.createPattern(image,"repeat|repeat-x|repeat-y|no-repeat");
Parametervärde
| Parameter | Beskrivning |
|---|---|
| image | Specificera det bild-, canvas- eller videoelement som ska användas. |
| repeat | Standard. Detta mönster upprepas både horisontellt och vertikalt. |
| repeat-x | Detta mönster upprepas endast i horisontal riktning. |
| repeat-y | Denna modell upprepas endast vertikalt. |
| no-repeat | Denna modell visas endast en gång (inte upprepbar). |
Webbläsarstöd
Numreringen i tabellen anger den första webbläsarversionen som helt stöder detta egenskap.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Kommentar:Internet Explorer 8 och tidigare versioner stöder inte <canvas>-elementet.
