JavaScript - Ansteuerung eines Applets

index Anfang rückwärts vorwärts runter
Da es standardmäßig keine Möglichkeit gibt, von JavaScript aus Vektorgrafiken zu malen, habe ich ein Java-Applet programmiert, welches sowas wie eine Leinwand für JavaScript darstellt.

Diese Seite wurde an Mozilla/Netscape, Konqueror und MSIE erfolgreich getestet.

Beispiel ansehen
Beschreibung des Java-Applets "canvas"

Querverweise zum Verständnis : [Einbindung in HTML] [Spezifikation Funktionen] [Objektreferenz applets]

Im folgenden Quelltext sind wichtige Bereiche grün und Kommentare gelb markiert.
index Anfang rückwärts vorwärts hoch runter 
<html>

<head>
<title>
JavaScript - Beispiel
</title>

<script type="text/javascript"> <!-- Script-Bereich einleiten -->
<!--                             /* HTML-Kommentar fuer Browser ohne JavaScript */

var canvasApp;     // globale Variable fuer Applet-Objekt
var initialized=0; // globale Variable: Applet bereits geladen?

function waitForInit()
// diese Funktion wartet, bis das Applet geladen wurde und veranlasst dann die Darstellung des Titelbildes
{
  var initIt=1;
// Objekt zum Applet ermitteln:
  canvasApp=document.getElementById("canvasApp");
// testen, ob wirklich Objekt:
  if (typeof(canvasApp)!="object")                
    initIt=0;
  if (initIt)
// testen, ob Methoden des Applets schon bekannt sind:
    if ((typeof(canvasApp.openCanvas)!="function")&&(typeof(canvasApp.openCanvas)!="object"))
      initIt=0;
// wenn alles bereit:
  if (initIt)
  {
// globale Variable setzen:
    initialized=1;
// in 0.5s Titelbild erzeugen
    setTimeout("titelbild();",500);
  }
// sonst
  else
// nochmal 0.5s warten und dann weiter versuchen
    setTimeout("waitForInit();",500);
}

function titelbild()
// diese Funktion erzeugt das Titelbild
{
  if (!initialized)
  {
    alert("noch keine Verbindung zum Applet");
    return;
  }
  canvasApp.openCanvas();            // Leinwand zum Bemalen oeffnen
  canvasApp.setColor(245,245,255);   // aktuelle Farbe auf pastellblau setzen
  canvasApp.fillRect(0,0,200,200);   // Hintergrund-Rechteck fuellen
  canvasApp.setColor(255,255,192);   // aktuelle Farbe auf pastellgelb setzen
  canvasApp.fillRect(0,105,200,25);  // Bauchbinde-Rechteck fuellen
  canvasApp.setColor(0,0,128);       // aktuelle Farbe auf dunkelblau setzen
  canvasApp.drawRect(0,0,199,199);   // Rahmen-Rechteck zeichnen
  canvasApp.drawRect(0,105,199,25);  // Bauchbinde-Rechteck zeichnen
  canvasApp.drawImage("droeppez.gif",30,7,140,95); // droeppez.gif hinmalen
  canvasApp.setFont("helvetica",1,16);  // Schriftart auswaehlen
  canvasApp.drawString("DROEPPEZ canvas",15,124); // Text schreiben
  canvasApp.drawString("Version 1.0",30,150);     // Text schreiben
  canvasApp.drawString("(canvasApp) 2001",30,170);        // Text schreiben
  canvasApp.drawString("Ulrich Kritzner",30,190); // Text schreiben
  canvasApp.closeCanvas();           // Leinwand freigeben und anzeigen
}

function bild1()
// diese Funktion erzeugt Bild 1
{
  if (!initialized)
  {
    alert("noch keine Verbindung zum Applet");
    return;
  }
  canvasApp.openCanvas();            // Leinwand zum Bemalen oeffnen
  canvasApp.setColor(255,255,0);     // aktuelle Farbe auf gelb setzen
  canvasApp.fillRect(0,0,200,200);   // Hintergrund-Rechteck fuellen
  canvasApp.setColor(64,128,0);      // aktuelle Farbe auf gelbgruen setzen
  canvasApp.drawRect(0,0,199,199);   // Rechteck zeichnen
  canvasApp.setColor(0,128,0);       // aktuelle Farbe auf dunkelgruen setzen
  canvasApp.fillOval(3,3,193,193);   // Kreis fuellen
  canvasApp.setColor(0,192,0);       // aktuelle Farbe auf gruen setzen
  canvasApp.fillOval(37,37,145,145); // Kreis fuellen
  canvasApp.setColor(0,255,0);       // aktuelle Farbe auf hellgruen setzen
  canvasApp.fillOval(72,72,95,95);   // Kreis fuellen
  canvasApp.setColor(255,255,0);     // aktuelle Farbe auf gelb setzen
  canvasApp.fillOval(105,105,49,49); // Kreis fuellen
  canvasApp.setColor(64,128,0);      // aktuelle Farbe auf gelbgruen setzen
  canvasApp.drawOval(105,105,49,49); // Kreis zeichnen
  canvasApp.drawImage("prev.gif",107,123,16,16); // prev.gif hinmalen
  canvasApp.drawImage("next.gif",137,123,16,16); // next.gif hinmalen
  canvasApp.drawImage("up.gif",123,107,16,16);   // up.gif hinmalen
  canvasApp.drawImage("down.gif",123,137,16,16); // down.gif hinmalen
  canvasApp.closeCanvas();           // Leinwand freigeben und anzeigen
}

function bild2()
// diese Funktion erzeugt Bild 2
{
  var i,j,r;                 // i, j und r definieren
  if (!initialized)
  {
    alert("noch keine Verbindung zum Applet");
    return;
  }
  canvasApp.openCanvas();            // Leinwand zum Bemalen oeffnen
  canvasApp.setColor(255,255,255);   // aktuelle Farbe auf weiss setzen
  canvasApp.fillRect(0,0,200,200);   // Hintergrund-Rechteck fuellen
  canvasApp.setColor(0,0,0);         // aktuelle Farbe auf schwarz setzen
  canvasApp.fillOval(2,2,196,196);   // Kreis fuellen
  for (i=16;i>0;i--)         // von aussen nach innen ...
  {
    r=i*6;
    for (j=0;j<15;j++)       // von rot nach gruen ...
    {
          // Farbe setzen :
      canvasApp.setColor(i*(16-j)-1,j*i,0);
          // Kreissegment zeichnen :
      canvasApp.fillArc(100-r,100-r,2*r,2*r,j*8,10);
    }
    for (j=0;j<15;j++)       // von gruen nach blau ...
    {
          // Farbe setzen :
      canvasApp.setColor(0,i*(16-j)-1,j*i);
          // Kreissegment zeichnen :
      canvasApp.fillArc(100-r,100-r,2*r,2*r,j*8+120,10);
    }
    for (j=0;j<15;j++)       // von blau nach rot ...
    {
          // Farbe setzen :
      canvasApp.setColor(j*i,0,i*(16-j)-1);
          // Kreissegment zeichnen :
      canvasApp.fillArc(100-r,100-r,2*r,2*r,j*8+240,10);
    }
  }
  canvasApp.closeCanvas();           // Leinwand freigeben und anzeigen
}

function bild3()
// diese Funktion erzeugt Bild 3
{
  var i,j,r;                 // i, j und r definieren
  if (!initialized)
  {
    alert("noch keine Verbindung zum Applet");
    return;
  }
  canvasApp.openCanvas();            // Leinwand zum Bemalen oeffnen
  canvasApp.setColor(255,255,255);   // aktuelle Farbe auf weiss setzen
  canvasApp.fillRect(0,0,200,200);   // Hintergrund-Rechteck fuellen
  canvasApp.setColor(0,0,0);         // aktuelle Farbe auf schwarz setzen
  canvasApp.fillOval(2,2,196,196);   // Kreis fuellen
  for (i=16;i>0;i--)         // von aussen nach innen ...
  {
    r=i*6;
    for (j=0;j<15;j++)       // von magenta nach cyan ...
    {
          // Farbe setzen :
      canvasApp.setColor(i*(16-j)-1,j*i,i*16-1);
          // Kreissegment zeichnen :
      canvasApp.fillArc(100-r,100-r,2*r,2*r,j*8,10);
    }
    for (j=0;j<15;j++)       // von cyan nach gelb ...
    {
          // Farbe setzen :
      canvasApp.setColor(j*i,i*16-1,i*(16-j)-1);
          // Kreissegment zeichnen :
      canvasApp.fillArc(100-r,100-r,2*r,2*r,j*8+120,10);
    }
    for (j=0;j<15;j++)       // von gelb nach magenta ...
    {
          // Farbe setzen :
      canvasApp.setColor(i*16-1,i*(16-j)-1,j*i);
          // Kreissegment zeichnen :
      canvasApp.fillArc(100-r,100-r,2*r,2*r,j*8+240,10);
    }
  }
  canvasApp.closeCanvas();           // Leinwand freigeben und anzeigen
}

//-->                          <!-- HTML-Kommentarende -->
</script>                      <!-- Script-Bereich beenden -->

</head>
<body onLoad="waitForInit();">

<a href="canvas.html">Erkl&auml;rung</a>
  <!-- Link zurueck auf canvas.html -->

<br>
<br>

  <!-- Leinwand-Applet: -->
<applet
  code="canvas"
  id="canvasApp"
  name="canvasApp"
  alt="your browser cannot show java applets"
  width="200" height="200"
  hspace="10" vspace="10"
>
</applet>

<br>
<br>

  <!-- Leinwand neu bemalen: -->
<form>
<input type=button value="Titelbild" onClick="titelbild();">
<input type=button value="Bild 1" onClick="bild1();">
<input type=button value="Bild 2" onClick="bild2();">
<input type=button value="Bild 3" onClick="bild3();">
</form>

<br>
</body>
</html>
index Anfang rückwärts vorwärts hoch
Autor: Ulrich Kritzner