Canvas createPattern() μέθοδος

Περιληπτικός οδηγός Canvas

Ορισμός και χρήση

createPattern() Η μέθοδος επαναλαμβάνει το καθορισμένο στοιχείο εντός της καθορισμένης κατεύθυνσης.

Τα στοιχεία μπορούν να είναι εικόνες, βίντεο ή άλλα στοιχεία <canvas>.

Τα επαναλαμβανόμενα στοιχεία μπορούν να χρησιμοποιηθούν για την απόδοση ορθογώνων, κύκλων ή γραμμών κ.λπ.

Παράδειγμα

Χρησιμοποιούμενη εικόνα:

λάμπ

Επανάληψη της εικόνας τόσο στην οριζόντια όσο και στην κατακόρυφια κατεύθυνση:

Ο περιηγητής σας δεν υποστηρίζει το ετικέτα HTML5 canvas.

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

Δοκιμάστε προσωπικά

Γλώσσα

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

Αξία παράμετρου

Παράμετρος Περιγραφή
image Ορίζει το εικόνα, το canvas ή το στοιχείο βίντεο που θα χρησιμοποιηθεί.
repeat Προεπιλεγμένο. Το μοτίβο επαναλαμβάνεται τόσο στην οριζόντια όσο και στην κατακόρυφια κατεύθυνση.
repeat-x Το μοτίβο επαναλαμβάνεται μόνο στην οριζόντια κατεύθυνση.
repeat-y Το μοτίβο επαναλαμβάνεται μόνο στον οριζόντιο κατεύθυνση.
no-repeat Το μοτίβο αυτό εμφανίζεται μόνο μια φορά (δεν επαναλαμβάνεται).

Υποστήριξη προγράμματος περιήγησης

Τα αριθμήματα στη τάση σηματοδοτούν την έκδοση του προηγούμενου προγράμματος που υποστηρίζει πλήρως την ιδιότητα.

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

Σημείωση:Ο Internet Explorer 8 και οι προηγούμενες εκδόσεις δεν υποστηρίζουν το στοιχείο <canvas>.

Περιληπτικός οδηγός Canvas