Dokumentation (canvas.quaese.de)

Allgemeines - ExplorerCanvas (IE)

Der Internet Explorer (IE) unterstützt das <canvas>-Element in seiner aktuellen Version (IE7, Stand: Januar 2008) noch nicht. Es existiert allerdings mit ExplorerCanvas eine JS-Erweiterung, die einen Grossteil der Funktionen zur Verfügung stellt.

Einbinden ins Dokument

Das JavaScript wird über ein script-Element ins Dokument eingebunden. Um es vor Nicht-IE-Browsern zu verbergen, wird es zusätzlich in einen bedingten Kommentar (conditional comment) verpackt.

<!--[if IE]>
  <script type="text/javascript" src="excanvas.js"></script>
<![endif]-->

Einschränkungen

Einschränkungen, die sich auf einzelne Funktionen oder Attribute beziehen, sind weitestgehend in den entsprechenden Dokumenten unter den Teilüberschriften "IE (ExplorerCanvas)" vermerkt.

Bekannte Probleme

Pattern (Muster) sind nicht implementiert
Radiale Verläufe sind nicht implementiert
Clipping-Pfade sind nicht implementiert
Zeichen-Modus ist nicht implementiert
arcTo ist nicht implementiert
Anzeigeprobleme mit clearRect

Verfügbarkeit

Weil das Script das fertig geladene Dokument benötigt, kann auf die Funktionen, Methoden und Attribute erst nach dem Laden zugegriffen werden (onload-Event).

window.onload = function(){
  // Zeichenfunktionen
}

Spätes Binden eines <canvas>-Elements

Soll ein weiteres <canvas>-Element erstellt werden (createElement), so muss die Methode initElement der öffentlichen Schnittstelle G_vmlCanvasManager mit dem entsprechenden Element als Argument aufgerufen werden. Rückgabe ist ein modifiziertes Pseudo-Canvas-Element.
Dabei ist zu beachten, dass das neu erstellte Element vor der Übergabe in ein Elternelement eingehängt wird.

// Neues Canvas-Element erstellen
var objCanvas = document.createElement("canvas");

// Falls es sich um einen IE handelt
if(/MSIE/.test(navigator.userAgent) && !window.opera){
  // Elternelement erstellen (wg. Methode fixElement_)
  var objDiv = document.createElement("div");
  // Neues Canvas-Element einhängen
  objDiv.appendChild(objCanvas);

  // Falls das neue Element noch kein Pseudo-Element ist und
  // die Schnittstelle existiert
  if ((!objCanvas.getContext) && (typeof G_vmlCanvasManager != "undefined")) {
    // Über öffentliche Schnittstelle das Element manuell initialisieren
    objCanvas = G_vmlCanvasManager.initElement(objCanvas);
  }
}

Grundgerüst mit ExplorerCanvas

Im Folgenden das Grundgerüst für den Fall, dass sich das <canvas>-Element bereits im Dokument befindet.

<html>
  <head>
    <title>&lt;canvas&gt;-Dokumentation</title>
    <!--[if IE]>
      <script type="text/javascript" src="excanvas.js"></script>
    <![endif]-->
    <script type="text/javascript">
      function zeichnen(){
        var objCanvas = document.getElementById('canvas_id');
        if (objCanvas.getContext){
          var objContext = objCanvas.getContext('2d');
          // Zeichenroutinen
        }else{
          // Sonstige Routinen
        }
      }

      window.onload = function(){
        zeichnen();
      }
    </script>
    <style type="text/css">
      canvas{ border: 1px solid #000;}
    </style>
  </head>
  <body>
    <canvas width="300" height="300" id="canvas_id"></canvas>
  </body>
</html>

Grundgerüst mit spätem Binden

Im Folgenden das Grundgerüst für die Variante, dass das <canvas>-Element nach dem Laden des Dokuments erstellt werden soll.

<html>
  <head>
    <title>&lt;canvas&gt;-Dokumentation</title>
    <!--[if IE]>
      <script type="text/javascript" src="excanvas.js"></script>
    <![endif]-->
    <script type="text/javascript">
      function zeichnen(){
        // Neues Canvas-Element erstellen
        var objCanvas = document.createElement("canvas");

        // Falls es sich um einen IE handelt
        if(/MSIE/.test(navigator.userAgent) && !window.opera){
          // Elternelement erstellen (wg. Methode fixElement_)
          var objDiv = document.createElement("div");
          // Neues Canvas-Element einhängen
          objDiv.appendChild(objCanvas);

          // Falls das neue Element noch kein Pseudo-Element ist und
          // die Schnittstelle existiert
          if ((!objCanvas.getContext) && (typeof G_vmlCanvasManager != "undefined")) {
            // Über öffentliche Schnittstelle das Element manuell initialisieren
            objCanvas = G_vmlCanvasManager.initElement(objCanvas);
          }
        }

        if (objCanvas.getContext){
          var objContext = objCanvas.getContext('2d');
          // Zeichenroutinen

          // Element in Dokument einhängen
          document.getElementsByTagName("body")[0].appendChild(objCanvas);
        }else{
          // Sonstige Routinen
        }
      }

      window.onload = function(){
        zeichnen();
      }
    </script>
    <style type="text/css">
      canvas{ border: 1px solid #000;}
    </style>
  </head>
  <body>
    <canvas width="300" height="300" id="canvas_id"></canvas>
  </body>
</html>

Beispiel

function drawIt(){
  // Neues Canvas-Element erstellen
  var objCanvas = document.createElement("canvas");

  // Falls es sich um einen IE handelt
  if(/MSIE/.test(navigator.userAgent) && !window.opera){
    // Elternelement erstellen (wg. Methode fixElement_)
    var objDiv = document.createElement("div");
    // Neues Canvas-Element einhängen
    objDiv.appendChild(objCanvas);

    // Falls das neue Element noch kein Pseudo-Element ist und
    // die Schnittstelle existiert
    if ((!objCanvas.getContext) && (typeof G_vmlCanvasManager != "undefined")) {
      // Über öffentliche Schnittstelle das Element manuell initialisieren
      objCanvas = G_vmlCanvasManager.initElement(objCanvas);
    }
  }

  if(objCanvas.getContext){
    var objContext = objCanvas.getContext("2d");

    objContext.fillRect(10, 10, 100, 100);

    document.getElementsByTagName("body")[0].appendChild(objCanvas);
  }else{}
}

Erläuterung

Das Beispiel erstellt nach dem Laden des Dokuments ein <canvas>-Element und zeichnet ein gefülltes Rechteck