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
Die Übergabe eines HTMLCanvasElements
funktioniert nicht in Gecko-Engines 1.8.
Die IE-Erweiterung ExplorerCanvas
unterstützt dieses Feature nicht.
CanvasPattern createPattern(image, type)
Die Methode erwartet zwei Parameter.
// 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;
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.