✔ Canvas neu zeichnen

[HTML5er]

Hallo,

wie kann man ein mit Pattern gefülltes Canvas das sich der Browserbreite anpasst,
beim verändern der Browserfenstergröße neu "füllen"/zeichnen?

window.onresize = function() {
       // var canvas
    };

 

[Quaese]

Hi,

am einfachsten ist es, du fügst das Muster im onresize-Event erneut ein. Hier sollte auch die Grössenanpassung des canvas-Elements erfolgen, wobei zu beachten ist, dass Breite und Höhe nicht nur über das style-Objekt geändert werden, sondern auch über die Attribute width und height des Elements selbst (wg. Firefox).

Beispiel:

function resizeCanvas(){
  var objCanvas = document.getElementById("canvas_id");
  // Falls das Objekt unterstützt wird
  if(objCanvas.getContext){
    // Kontext
    var objContext = objCanvas.getContext("2d");

    // Dimensionsanpassung
    objCanvas.style.width = window.innerWidth+"px";
    objCanvas.style.height = window.innerHeight+"px";
    objCanvas.width = window.innerWidth;
    objCanvas.height = window.innerHeight;

    // Patternobjekt (CanvasPattern) erstellen
    var objPattern = objContext.createPattern(objImg, "repeat");

    // Füllmethode mit Patternobjekt auszeichnen
    objContext.fillStyle = objPattern;

    // Rechteck zeichnen
    objContext.fillRect(0, 0, window.innerWidth, window.innerHeight);
  }else{
    // Sonstiger Code
  }
}

Voraussetzung für obiges Script ist ein existierendes Canvaselement mit der ID canvas_id, sowie ein globales Bildobjekt objImg. Dieses kann beispielsweise wie folgt erstellt werden:

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

Weiterhin muss angemerkt werden, dass obiges Beispiel nicht für den IE funktioniert. Dort muss die Dokumentbreite anders bestimmt werden. Weiterhin habe ich nicht getestet, wie sich die Grössenanpassung mit dem Explorer Canvas verträgt.

Zum Testen habe ich das Ganze mal hochgeladen - Canvas mit Pattern.

Ciao
Quaese