Java Canvas

aus ZUM-Wiki, dem Wiki für Lehr- und Lerninhalte auf ZUM.de
Wechseln zu: Navigation, Suche

<language>Java</language>

Es wird bereits ein Canvas Objekte canvas zur Verfügung gestellt. Sollten Sie mehr als eine Zeichenfläche auf einer Wikiseite verwenden, werden diese durchnummeriert. canvas2 würde die zweite Zeichenfläche ansprechen usw.

Sie können sich auch direkt ein eigenes Canvas Objekt erzeugen mit dem Befehl:

Canvas c = new Canvas(1); // 1 = erstes Canvas Element der Seite

Folgende Methoden unterstützt die Klasse Canvas:

public void clear()
public void clear(int x1, int y1, int x2, int y2)
public void line(int x1, int y1, int x2, int y2)
public void triangle(int x1, int y1, int x2, int y2,int x3, int y3)
public void rect(int x1, int y1, int x2, int y2)
public void fillRect(int x1, int y1, int x2, int y2)
public void ellipse(int x, int y, int r)
public void text(int x, int y, String text, int size)
public void text(int x, int y, String text)
public void drawImage(int x, int y, String url)
public void drawImage(int x, int y, int w, int h, String url)
public void setWidth(int w)
public void setColor(String c)
public void setColor(int r, int g, int b)

Verwenden Sie etwa die nachfolgende Befehlsfolge um die Zeichenfläche zu löschen:

canvas.clear();

Die Befehle sind selbsterklärend bzw. können leicht durch Experimente erschlossen werden. Bei setColor (String c) kann eine HTML Farbe der Form #FF0000 angegeben werden.

Beispiele

Zeichnet 25 farbige Rechtecke in einer Matrix von 5 mal 5 Feldern.

<eval id="4ba0ef65dc84a"> canvas.clear(); for (int i=0;i<6;i++){

for (int j=0;j<6;j++){       
 canvas.setColor((int)(255-42.5*i),(int)(255-42.5*j),0);      
 canvas.fillRect(j*25,i*25,25,25);           
 
 canvas.setColor(0,0,0);      
 canvas.text(j*25+7,i*25+16,"x",16);    
}  

} </eval>

<canvas></canvas>

Mit drawImage(x,y,w,h,URL) können Bilder auf einen Canvas gezeichnet werden.

<eval id="4ba0ef65dfed1"> String url = "http://www.michael-hielscher.de/images/atocc.jpg"; canvas2.drawImage(100,50,url); canvas2.drawImage(250,50,50,50,url); canvas2.drawImage(350,50,50,100,url); </eval>

<canvas></canvas>