Bild zu verwenden:
Beispiel
Wiederholen, ein Bild sowohl horizontal als auch 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 vollständig unterstützt.
| Methode | |||||
|---|---|---|---|---|---|
| createPattern() | 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
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üll 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, Leinwand oder Videoelement des Musters zu verwenden | |
| wiederholen | 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 (no repeat) | Spiel es " |
<Canvas Object