Programmieren mit JavaScriptCanvas : Erzeugen von Grafiken (Geht nicht im IE!)Bruchrechnung Inhalt Figuren stempeln
|
|||
Ein erstes Beispiel |
| ||
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 |
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 |
|
||
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:
| ||
weitere Gestaltungselemente |
| ||
Bruchrechnung Seitenanfang Figuren stempeln |