Canvas createPattern() metoden

Definisjon og bruk

createPattern() Metoden gentager det specificerede element inden for den specificerede retning.

Elementerne kan være billeder, videoer eller andre <canvas> elementer.

De gentagne elementer kan bruges til at tegne/fylde rektangler, cirkler eller linjer osv.

Eksempel

Brugte billeder:

lampe

Gentag billedet i både den horisontale og den vertikale retning:

Din browser understøtter ikke HTML5 canvas tagget.

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();

Prøv det selv

Syntaks

context.createPattern(image,"repeat|repeat-x|repeat-y|no-repeat");

Parameterværdi

Parameter Beskrivelse
image Definerer det ønskede billede, canvas eller videoelement.
repeat Standard. Denne model gentages i både den horisontale og den vertikale retning.
repeat-x Denne model gentages kun i den horisontale retning.
repeat-y Dette mønster gentages kun i lodret retning.
no-repeat Dette mønster vises kun én gang (ikke gentaget).

Browserstøtte

Tallene i tabellen angiver den første browserversion, der fuldt ud understøtter egenskaben.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

Bemærk:Internet Explorer 8 og tidligere versioner understøtter ikke <canvas>-elementet.