HTML-Canvas createPattern()- Methode
Zu verwendendes Bild:
Beispiel
Wiederholen Sie 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();
Browser-Unterstützung
Die Zahlen in der Tabelle geben die erste Browserversion an, die das Verfahren vollständig unterstützt.
| Method | |||||
|---|---|---|---|---|---|
| createPattern() | Yes | 9.0 | Yes | Yes | Yes |
Definition und Verwendung
Die Methode createPattern() wiederholt das angegebene Element in der angegebenen Richtung.
Das Element kann ein Bild, ein Video oder ein anderes <canvas>-Element sein.
Das wiederholte Element kann zum Zeichnen/Füllen von Rechtecken, Kreisen, Linien usw. verwendet werden.
| JavaScript-Syntax: | Kontext .createPattern ( Bild , "Wiederholung | Wiederholung-x | Wiederholung-y | keine Wiederholung"); |
|---|
Parameterwerte
| Parameter | Description | Play it |
|---|---|---|
| image | Specifies the image, canvas, or video element of the pattern to use | |
| repeat | Default. The pattern repeats both horizontally and vertically | |
| repeat-x | The pattern repeats only horizontally | |
| repeat-y | The pattern repeats only vertically | |
| no-repeat | The pattern will be displayed only once (no repeat) |
❮ HTML-Canvas-Referenz