Farben und Styles - createPattern()
Die Methode createPattern dient zum Erstellen eines neuen Füllmusters. Die Methode erwartet
zwei Parameter, von denen der erste ein HTMLImageElement oder HTMLCanvasElement
ist, das bereits fertig geladen ist. Das zweite Argument repräsentiert die Wiederholmethode.
Zurückgegeben wird ein Objekt vom Typ CanvasPattern
Zu beachten:
Die Übergabe eines HTMLCanvasElements funktioniert nicht in Gecko-Engines 1.8.
IE (ExplorerCanvas)
Die IE-Erweiterung ExplorerCanvas unterstützt dieses Feature nicht.
createPattern
CanvasPattern createPattern(image, type)
Die Methode erwartet zwei Parameter.
Parameter
image - HTMLImage- oder HTMLCanvasElement
type - Wiederholmethode (repeat, repeat-x, repeat-y, no-repeat)
Beispiel
// Bildobjekt erstellen
var objImg = new Image();
objImg.src = "bild.jpg";
function drawPattern(){
var objCanvas = document.getElementById("canvas_id");
// Falls das Objekt unterstützt wird
if(objCanvas.getContext){
// Kontext
var objContext = objCanvas.getContext("2d");
// Patternobjekt (CanvasPattern) erstellen
var objPattern = objContext.createPattern(objImg, "repeat");
// Falls es ein IE ist
if(document.all && !window.opera)
// z.B. alternativer Code
return;
// Füllmethode mit Patternobjekt auszeichnen
objContext.fillStyle = objPattern;
// Rechteck zeichnen
objContext.fillRect(10, 10, 280, 130);
}else{
// Sonstiger Code
}
}
window.onload = drawPattern;
Erläuterung
Zunächst wird ein Bildobjekt erstellt und die Quelle zugewiesen. Nachdem das Dokument fertig geladen ist,
wird mit Hilfe der Methode
createPattern
ein CanvasPattern-Objekt generiert.
Jetzt kann das neu erstellte Objekt als Füllmethode der Eigenschaft
fillStyle
zugewiesen werden. Zuletzt wird ein Rechteck mit dem gerade erstellten Füllmuster gezeichnet.