Dokumentation (canvas.quaese.de)
 

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

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