Μέθοδος createPattern() του HTML canvas

Εγχειρίδιο HTML5 Canvas

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

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

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

Τα στοιχεία που επαναλαμβάνονται μπορούν να χρησιμοποιηθούν για να σχεδιάσουν/εμπλουτίσουν ορθογώνια, κύκλους ή γραμμές κ.λπ.

Παράδειγμα

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

lamp

Αναπαραγωγή εικόνας σε οριζόντια και κάθετη κατεύθυνση:

Ο περιηγητής σας δεν υποστηρίζει το ετικέτα 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

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

Εγχειρίδιο HTML5 Canvas