Bild zu verwenden:
Beispiel
Wiederholen Sie ein Bild horizontal und vertikal:
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(); Versuch es selber " Browser-Unterstützung
Die Zahlen in der Tabelle geben Sie die erste Browser-Version, die die Methode in vollem Umfang unterstützt.
| Methode | |||||
|---|---|---|---|---|---|
| createPattern() | ja | 9.0 | ja | ja | ja |
Definition und Verwendung
Die createPattern() Methode wiederholt das angegebene Element in der angegebenen Richtung.
Das Element kann ein Bild, ein Video oder eine andere sein <canvas> Element.
Das wiederholte Element kann verwendet werden, zu zeichnen / füllen Rechtecke, Kreise, Linien usw.
| JavaScript-Syntax: | context.createPattern(image,"repeat|repeat-x|repeat-y|no-repeat"); |
|---|
Parameterwerte
| Parameter | Beschreibung | Spiel es |
|---|---|---|
| image | Gibt das Bild, Segeltuch, oder Video-Element des Musters zu verwenden, | |
| repeat | Standard. Das Muster wiederholt sich sowohl horizontal als auch vertikal | Spiel es " |
| repeat-x | Das Muster wiederholt sich nur horizontal | Spiel es " |
| repeat-y | Das Muster wiederholt sich nur vertikal | Spiel es " |
| no-repeat | Das Muster wird nur einmal angezeigt werden (keine Wiederholung) | Spiel es " |