• Allgemeines
• Schnittstellen/Objekte
  • CanvasRenderingContext2D
  • CanvasGradient
  • CanvasPattern
  • ImageData
  • <canvas>-Element
• Canvas-Zustand
• Transformationen
• Rechtecke
• Pfad-Schnittstelle
• Farben und Styles
• Linienstile
• Schatten
• Verknüpfungen
• Bilder zeichnen
• Pixel-Manipulation
• Anwendungen
• Links
• Sitemap
• Impressum

Schnittstellen/Objekte - CanvasPattern

Ein CanvasPattern-Objekt ist der Rückgabetyp, den die Methode createPattern liefert.

IE (ExplorerCanvas)

Die IE-Erweiterung ExplorerCanvas unterstützt dieses Feature nicht.

Beispiel

// Bildobjekt erstellen
var objImg = new Image();
objImg.src = "bild.gif";

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