Dokumentation (canvas.quaese.de)
 

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.

Anzeige

Ihr Browser unterstützt das canvas-Element leider nicht.

 
Dokument zuletzt modifiziert: 05.02.2008, 14:28 Uhr
<canvas>-Dokumentation Ver. 0.1 | Quaese, Jan 2008 | Datenschutz | Sitemap