Benutzung von canvas-Java-Applets
Wie alle Java-Applets werden auch Leinwand-Applets in die JavaScript-Objekthierarchie eingebaut. Sie lassen sich als document.applets[#] ansprechen oder unter ihrem Namen. (siehe Objektreferenz Applets)
Applets vom Typ canvas dienen ausschließlich dem Erzeugen von Vektorgrafiken aus JavaScript heraus. Es ist zwar ineffizient, für jede popelige Vektorgrafik erstmal ein Java-Applet einzubinden, aber momentan (Anfang 2002) die einzige Möglichkeit, eine Malfläche für JavaScript bereitzustellen.

Funktionen von canvas-Applets
FunktionBedeutung
Info
getAppletInfo() gibt den String "DROEPPEZ canvas v1.0 (c) 2001 Ulrich Kritzner" zurück
Leinwand
newCanvas() schmeißt die alte Leinwand weg und nimmt eine neue
openCanvas() öffnet die Leinwand zum Bemalen
closeCanvas() versiegelt die Leinwand und zeigt sie an
canvasWidth() gibt die Leinwandbreite in Pixeln zurück
canvasHeight() gibt die Leinwandhöhe in Pixeln zurück
Einstellungen
setColor(r,g,b) setzt die Farbe des Malstiftes
r: Rotanteil (0-255)
g: Grünanteil (0-255)
b: Blauanteil (0-255)
setFont(name,style,size) setzt die Schriftart
name: Schriftname (Zeichenkette)
style: Schriftstil (0: normal, 1: fett, 2: kursiv, 3: fett+kursiv)
size: Schriftgrad (ganze Zahl)
setClip(x,y,width,height) setzt eine rechteckige Malschablone über die Leinwand
x: Position des linken Randes (Pixel)
y: Position des oberen Randes (Pixel)
width: Breite des zugänglichen Bereiches (Pixel)
height: Höhe des zugänglichen Bereiches (Pixel)
Bitmap
copyArea(x,y,width,height,dx,dy) kopiert einen Bildausschnitt innerhalb des spezifizierten Rechtecks
x: Position des linken Randes (Pixel)
y: Position des oberen Randes (Pixel)
width: Breite des Verschiebe-Bereiches (Pixel)
height: Höhe des Verschiebe-Bereiches (Pixel)
dx: Verschiebung (Pixel: positiv rechts, negativ links)
dy: Verschiebung (Pixel: positiv runter, negativ hoch)
drawImage(String stg,int x,int y,
          int width,int height)
malt ein Bild hin
stg: Bildname relativ zum aktuellen Verzeichnis (String)
x: linker Rand (Pixel)
y: oberer Rand (Pixel)
width: Breite (Pixel)
height: Höhe (Pixel)
Schrift und Linien
drawString(stg,x,y) schreibt eine Zeichenkette
stg: Zeichenkette (String)
x: Startposition von links (Pixel)
y: Position der Unterkante des Schriftzuges (Pixel)
drawLine(x1,y1,x2,y2) zeichnet eine Linie
x1,y1: Anfangspunkt (Pixel)
x2,y2: Endpunkt (Pixel)
Figuren zeichnen
drawArc(x,y,width,height,
        startAngle,arcAngle)
zeichnet ein Ellipsensegment (Tortenstück)
x: linker Rand der Ellipse (Pixel)
y: oberer Rand der Ellipse (Pixel)
width: Breite der Ellipse (Pixel)
height: Höhe der Ellipse (Pixel)
startArc: Startwinkel des Segments (Grad, 0 Grad bei drei Uhr)
arcAngle: Winkel des Segments (Grad)
drawOval(x,y,width,height) zeichnet eine Ellipse
x: linker Rand (Pixel)
y: oberer Rand (Pixel)
width: Breite (Pixel)
height: Höhe (Pixel)
drawRect(x,y,width,height) zeichnet ein Rechteck
x: linker Rand (Pixel)
y: oberer Rand (Pixel)
width: Breite (Pixel)
height: Höhe (Pixel)
drawRoundRect(x,y,width,height,
              arcWidth,arcHeight)
zeichnet ein Rechteck mit abgerundeten Ecken
x: linker Rand (Pixel)
y: oberer Rand (Pixel)
width: Breite (Pixel)
height: Höhe (Pixel)
arcWidth: horizontaler Durchmesser der Rundungen
arcHeight: vertikaler Durchmesser der Rundungen
Figuren füllen
fillArc(x,y,width,height,
         startAngle,arcAngle)
füllt ein Ellipsensegment (Tortenstück)
x: linker Rand der Ellipse (Pixel)
y: oberer Rand der Ellipse (Pixel)
width: Breite der Ellipse (Pixel)
height: Höhe der Ellipse (Pixel)
startArc: Startwinkel des Segments (Grad, 0 Grad bei drei Uhr)
arcAngle: Winkel des Segments (Grad)
fillOval(x,y,width,height) füllt eine Ellipse
x: linker Rand (Pixel)
y: oberer Rand (Pixel)
width: Breite (Pixel)
height: Höhe (Pixel)
fillRect(x,y,width,height) füllt ein Rechteck
x: linker Rand (Pixel)
y: oberer Rand (Pixel)
width: Breite (Pixel)
height: Höhe (Pixel)
fillRoundRect(x,y,width,height,
              arcWidth,arcHeight)
füllt ein Rechteck mit abgerundeten Ecken
x: linker Rand (Pixel)
y: oberer Rand (Pixel)
width: Breite (Pixel)
height: Höhe (Pixel)
arcWidth: horizontaler Durchmesser der Rundungen
arcHeight: vertikaler Durchmesser der Rundungen


Quelltext von canvas.java
/*+---------------------------------------------------------+
  | DROEPPEZ Leinwand Version 1.0                           |
  | (c) 2001 Ulrich Kritzner                                |
  +---------------------------------------------------------+

 Da es keine Moeglichkeit gibt,
 einfache Bilder von JavaScript aus zu manipulieren,
 habe ich mich gemuessigt gefuehlt,
 eine Art Java-Leinwand zu programmieren.
 Auf diese Leinwand koennen JavaScript-Funktionen malen,
 indem sie auf die enthaltenen Funktionen zugreifen.
 Die Leinwand puffert alle Malaktionen auf einem unsichtbaren Bild,
 welches bei jedem closeCanvas() auf die Webseite kopiert wird. */

import java.lang.*;
import java.applet.*;
import java.awt.*;
import java.net.*;

public class canvas
       extends Applet
{
  Dimension dim=null;
  Image img=null;
  Graphics ig=null;

/* Info ----------------------------------------------- */

  public String getAppletInfo()
  /* stellt sich vor */
  {
    return "DROEPPEZ canvas v1.0 (c) 2001 Ulrich Kritzner";
  }
  
/* Appletsteuerung ------------------------------------ */

  public void init()
  /* einmalige Initialisierung */
  {
    dim=getSize();
    img=createImage(dim.width,dim.height);
    openCanvas();
    if (ig!=null)
      ig.drawString(getAppletInfo(),5,20);
    closeCanvas();
    System.out.println(getAppletInfo());
  }

  public void destroy()
  /* Aufraeumen */
  {
    closeCanvas();
    if (img!=null)
      img.flush();
    img=null;
  }

/* Anzeige -------------------------------------------- */

  public void paint(Graphics g)
  {
    if (img!=null)
      g.drawImage(img,0,0,this);
  }

/* Manipulation --------------------------------------- */

  public void newCanvas()
  {
    closeCanvas();
    if (img!=null)
      img.flush();
    img=null;
    dim=getSize();
    img=createImage(dim.width,dim.height);
  }

  public void openCanvas()
  {
    if (img!=null)
      if (ig==null)
        ig=img.getGraphics();
  }

  public void closeCanvas()
  {
    Graphics g;
    if (img!=null)
    {
      if (ig!=null)
        ig.dispose();
      ig=null;
    }
    g=getGraphics();
    paint(g);
    g.dispose();
  }

  public int canvasWidth()
  {
    return dim.width;
  }

  public int canvasHeight()
  {
    return dim.height;
  }

  public void setColor(int r,int g,int b)
  {
    if (ig!=null)
    {
      Color c=new Color(r,g,b);
      ig.setColor(c);
    }
  }

  public void setFont(String name,int style,int size)
  {
    if (ig!=null)
    {
      Font font=new Font(name,style,size);
      ig.setFont(font);
    }
  }

  public void setClip(int x,int y,int width,int height)
  {
    if (ig!=null)
      ig.setClip(x,y,width,height);
  }

  public void copyArea(int x,int y,int width,int height,int dx,int dy)
  {
    if (ig!=null)
      ig.copyArea(x,y,width,height,dx,dy);
  }

  public void drawImage(String stg,int x,int y,int width,int height)
  {
    Image img;
    if (ig==null)
      return;
    img=getImage(db,stg);
    if (img==null)
      return;
    mt.addImage(img,0);
    try
    {
      mt.waitForAll();
    }
    catch (InterruptedException e)
    {
      mt.removeImage(img);
      img.flush();
      return;
    }
    mt.removeImage(img);
    ig.drawImage(img,x,y,width,height,this);
    img.flush();
  }

  public void drawString(String stg,int x,int y)
  {
    if (ig!=null)
      ig.drawString(stg,x,y);
  }

  public void drawLine(int x1,int y1,int x2,int y2)
  {
    if (ig!=null)
      ig.drawLine(x1,y1,x2,y2);
  }

  public void drawArc(int x,int y,int width,int height,int startAngle,int arcAngle)
  {
    if (ig!=null)
      ig.drawArc(x,y,width,height,startAngle,arcAngle);
  }

  public void drawOval(int x,int y,int width,int height)
  {
    if (ig!=null)
      ig.drawOval(x,y,width,height);
  }

  public void drawRect(int x,int y,int width,int height)
  {
    if (ig!=null)
      ig.drawRect(x,y,width,height);
  }

  public void drawRoundRect(int x,int y,int width,int height,int arcWidth,int arcHeight)
  {
    if (ig!=null)
      ig.drawRoundRect(x,y,width,height,arcWidth,arcHeight);
  }

  public void fillArc(int x,int y,int width,int height,int startAngle,int arcAngle)
  {
    if (ig!=null)
      ig.fillArc(x,y,width,height,startAngle,arcAngle);
  }

  public void fillOval(int x,int y,int width,int height)
  {
    if (ig!=null)
      ig.fillOval(x,y,width,height);
  }

  public void fillRect(int x,int y,int width,int height)
  {
    if (ig!=null)
      ig.fillRect(x,y,width,height);
  }

  public void fillRoundRect(int x,int y,int width,int height,int arcWidth,int arcHeight)
  {
    if (ig!=null)
      ig.fillRoundRect(x,y,width,height,arcWidth,arcHeight);
  }
}