Sie brauchen Javascript (Bitte einschalten !)
aufgeschlossen Programmieren mit JavaScript

Canvas : Erzeugen von Grafiken (Geht nicht im IE!)

 Bruchrechnung           Inhalt            Figuren stempeln

 

Ein erstes Beispiel
Ihr Browser kann kein Canvas! Ein Rahmenprogramm für eigene Versuche finden Sie unter

vcanvas.html


Den Quelltext für das Beispiel nebenan finden Sie unter

canvasKooSyst.html
(Achtung: Durch die Ziffernleiste des Koordinatensystems sind die Koordinaten verschoben!)
Canvas
(Leinwand) 		Das canvas - Tag ist neu in HTML 5. Es wird von allen neueren Browsern unterstützt außer dem Internet-Explorer. 
<canvas id="canvastest" width="250" height="250" >  </canvas>
definiert einen rechteckigen Bereich mit den angegebenen Maßen, in dem gezeichnet werden kann.
Die id ist nötig, damit der Canvas von Javascript aus angesprochen werden kann. 
 var canvas = document.getElementById('canvastest');
definiert den Canvas (die "Leinwand"). 
var bild = canvas.getContext('2d');
erlaubt endlich den Zugriff auf die Zeichenfunktionen. Mit "fillstyle" definiert man die Farbe, mit der Flächen ausgefüllt werden. "fillRect" lässt das Rechteck aus dem Beispiel oben zeichnen.

 

Programmrahmen 
<html> <head>
    <script type="text/javascript">
      function zeichne(){
        var canvas = document.getElementById('canvastest');
        var bild = canvas.getContext('2d');

        bild.fillStyle = "rgb(200,0,0)";
        bild.fillRect (10, 10, 60, 50);
      }
    </script>
</head>
<body onload="zeichne();">
  <canvas id="canvastest" width="150" height="150" > Ihr Browser kann kein Canvas! </canvas>
</body></html>

Im "body" wird der canvas-Tag zur Verfügung gestellt und die "function zeichne()" aufgerufen. "onload" bedeutet, dass der Aufruf von "zeichne" sofort beim Anzeigen der Seite durchgeführt wird.

In der Javascript-Funktion werden die Variablen "canvas" und "bild" definiert. Dann kann es schon losgehen!

Rechtecke

fillRect
strokeRect
clearRect 
fillRect(x,y,breite,hoehe)
zeichnet ein ausgefülltes Rechteck; die linke obere Ecke hat die Koordinaten (x/y); die Farbe der Füllung ist der zuletzt mit "fillStyle" eingestellte Farbwert. 
strokeRect(x,y,breite,hoehe)
zeichnet den Umriss eines Rechtecks; die linke obere Ecke hat die Koordinaten (x/y); die Farbe der Linie ist der zuletzt mit "strokeStyle" eingestellte Farbwert. 
clearRect(x,y,breite,hoehe)
löscht einen rechteckigen Bereich; die linke obere Ecke hat die Koordinaten (x/y).

 

Pfade

Alle nicht rechteckigen Formen werden mit Hilfe von Pfaden erzeugt.

Was ist ein Pfad? Zum Zeichnen eines Dreiecks geht man zu Punkt A (moveTo), zeichnet eine Linie zu Punkt B (lineTo), zeichnet weiter zu Punkt C (lineTo) und schließlich zurück zu Punkt A. Danach kann man entscheiden, ob der Umriss reicht oder die Figur ausgefüllt werden soll. Dabei wird so etwas wie ein "Zeichenstift" verwendet, der immer an irgendeiner Stelle ist.

Der Canvas kann sich genau einen solchen Pfad merken.

beginPath()
closePath()
stroke()
fill() 
beginPath()
Ein evtl. noch vorhandener "alter" Pfad wird gelöscht, die eingabe eines Pfades gestartet. 
closePath()
Die Eingabe des Pfades wird beendet (meist nicht erforderlich). 
stroke()
Der Umriss des Pfades wird gezeichnet; die Farbe der Linie ist der zuletzt mit "strokeStyle" eingestellte Farbwert. 
fill()
Die vom Pfad ausgefüllte Fläche wird mit dem zuletzt mit "fillStyle" eingestellte Farbwert ausgefüllt. Wenn closePath nicht aufgerufen wurde, wird evtl. vorher noch eine Linie zum Ausgangspunkt ergänzt.
moveTo(x, y) 
moveTo(x, y)
Der Zeichenstift wird an die angegebene Position bewegt, ohne dass eine Linie gezeichnet wird. Benutzt wird "moveTo" immer am Anfang, weil man dann nicht weiß, wo der Stift zuletzt verblieben ist, und sonst immer, wenn die durchgehende Linie unterbrochen werden soll.
lineTo(x, y) 
lineTo(x, y)
Die Linie beginnt an der Stelle, an der sich der Zeichenstift befindet (als Folge etwa eines "moveTo" oder des vorangehenden "lineTo"). Der Zeichenstift wird von dort geradlinig an die angegebene Position bewegt und eine Linie gezeichnet.
Kreisbögen 
 arc(x, y, radius, startWinkel, endWinkel, gegenUhrZeiger)
zeichnet einen Kreisbogen (bis hin zum vollständigen Kreis). "x" und "y" sind dabei die Koordinaten des Kreismittelpunktes, "radius" ist der Radius. Der Kreisbogen beginnt bei "startWinkel" und endet bei "endWinkel". Diese beiden winkel werden gegenüber der positiven richtung der x-Achse angegeben - und zwar im Bogenmaß! Wenn man als letzten Parameter "true" angibt, erfolgt die Drehung von "startWinkel" zu "endWinkel" in mathematisch positiver Richtung : gegen den Uhrzeigersinn. Bei "false" dann also mit der Uhrzeigerdrehung.

 

Beispiele 
// Das grüne Dreieck aus dem Beispiel oben:
// ein geschlossener Streckenzug wird gezeichnet
	bild.strokeStyle= "rgb(0,200,0)"; // gruen
	bild.beginPath();
	bild.moveTo( 100, 50);
	bild.lineTo( 200, 0);
	bild.lineTo( 150, 200);
	bild.lineTo( 100, 50);
	bild.stroke();  // Umriss zeichnen

// Das blau ausgefüllte Dreieck aus dem Beispiel oben:
// die dritte Linie zurück zum Anfang wird automatisch ergänzt
	bild.fillStyle = "rgb(0,0,200)"; // blau
	bild.beginPath();
	bild.moveTo( 50, 100);
	bild.lineTo( 100, 50);
	bild.lineTo( 100, 150);
	bild.fill();  // ergaenzen und ausfuellen

// Das Gesicht nebenan:
	bild.strokeStyle= "rgb(0,0,0)";   // schwarz
	bild.beginPath();
	bild.arc(75,75,50,0,Math.PI*2,true); // Kopfumriss
		// Der Bogen mit Radius 50 beginnt beim Winkel 0 (=0 Grad), also rechts
		// er endet beim Winkel 2 pi, also 360 Grad
	bild.moveTo(110,75);
		// Der (eigentlich unsichtbare: moveTo) Weg von der rechten Kopfseite
		// zum rechten Mundwinkel ist im Beispiel rot gezeichnet!
	bild.arc(75,75,35,0,Math.PI,false);   // Mund (im Uhrzeigersinn)
		// Kreisbogen mit Radius 35; Anfangswinkel wieder 0
		// der Endwinkel ist diesmal "pi", also 180 Grad, also links in der Mitte
		// wegen "false" wird unten herum gezeichnet
	bild.moveTo(65,65);
	bild.arc(60,65,5,0,Math.PI*2,true);  // linkes Auge
	bild.moveTo(95,65);
	bild.arc(90,65,5,0,Math.PI*2,true);  // rechtes Auge
	bild.stroke();
Ihr Browser kann kein Canvas!
Aufgabe 1 Verändere "vcanvas.html" und erforsche die Möglichkeiten der Gestaltung von Grafiken.
Aufgabe 2 a) Zeichne auf Kästchenpapier ein Koordinatensystem wie im Beispiel oben (1 Kästchen 0 10 Pixel). b) Fertige dort eine sinnvolle Zeichnung an (mind. 20 Linien und 2 Bögen); Anfangs- und Endpunkte der Linien sowie die Mittelpunkte der Kreise müssen auf Kreuzungspunten der Kästchenlinien liegen. c) Schreibe (dann erst) ein Javascript, das die Zeichung auf dem Bildschirm darstellt. Die Koordinaten kannst du dank der Vorarbeiten aus der Zeichnung ablesen.
Farbangaben bei fillStyle und strokeStyle Mögliche Werte, um die Farbe "orange" darzustellen, sind:
  • bild.fillStyle = "orange"; // wenn der Farbname bekannt ist ..
  • bild.fillStyle = "#FFA500"; // der HTML-Editor erzeugt solche Farbwerte
  • bild.fillStyle = "rgb(255,165,0)"; // Mischen aus Rot/Grün/Blau - Anteilen aus dem Bereich 0 .. 255
  • bild.fillStyle = "rgba(255,165,0,1)"; // Dasselbe mit Angabe der Tranzparenz: 0 ist durchsichtig, 0.5 halbtransparent, 1 undurchsichtig
  • bild.fillStyle = gradient; // Zuweisung eines Farbverlaufs (s.u.)
weitere Gestaltungselemente
  • lineWidth : Liniendicke von 1 (Standardwert) an aufwärts.
  • lineCap : bei "dicken" Linien kann man das Linienende als "butt" (abgeschnitten), "round" (abgerundet) oder "square" (etwas verlängert) angeben.
  • lineJoin : Bei Linien, die in einem Winkel aneinander stoßen, kann die Verbindung abgerundet ("round"), abgeschnitten ("bevel") oder spitz verlängert ("miter") werden; diese Verlängerung kann begrenzt werden (miterLimit= ..)
  • createLinearGradient(x1,y1,x2,y2) : Bereich für einen linearen Farbverlauf; der Farbverlauf wird dann mit "addColorStop" gestaltet und schließlich anstelle einer Farbe mit "fillStyle" oder "strokeStyle" zugewiesen.
  • createRadialGradient(x1,y1,r1,x2,y2,r2): Bereich für einen kreisförmigen Farbverlauf (s.o.)
  • addColorStop(position, color) : Farben setzen in einem Farbverlauf; die Farbe "color" wird an der Stelle eingesetzt, die durch "position" angegeben wird, und zwar als Zahl zwischne 0 und 1 (Anteil / Prozent)
  • createPattern(img,'repeat') : Bildwiederholung
  Bruchrechnung           Seitenanfang            Figuren stempeln