MAYA K. Canvas-Projekt. In HTML- body: Canvas tag öffnen seamntsiches HTML) Canvas bekommt eine id...

Post on 06-Apr-2016

221 views 2 download

Transcript of MAYA K. Canvas-Projekt. In HTML- body: Canvas tag öffnen seamntsiches HTML) Canvas bekommt eine id...

MAYA K.

Canvas-Projekt

In HTML- body:

Canvas tag öffnen seamntsiches HTML)

Canvas bekommt eine id (1mal verwenden, mit # angesprochen)

Höhe und breite

Randlinie soll 1px haben

Und schwarz sein

Das Kreuz soll im crosshair Stil sein

Wenn sich die maus bewegt, soll die funktion drawLine (event) passieren

Wenn die Maus gedrückt wird, soll die funcktion startdraw passieren

Wenn die Maus nicht mehr gerdrückt wird, soll die Funktion stopDraw passieren.

Das sollte nicht angezeigt werden (nur wen Browser Canvas nicht unterstützt)

Das kommt alles noch in den öffnenden Canvas tag!

Hier beginnt ein js Text

Eine variable wird erstellt mit „var“

Wenn ich zeichne dann wird die variable true wenn ich loslasse wird sie wieder false

Damit greift man auf das canvas Element zu

Im 2 dimensionalen Bereich wird gezeichnet

Der context, zeigt dem browser was er eigentlich tun soll.

Funktion, wenn die Maus sich beweget (eine Linie soll gezeichnet werden.)

Wenn man zeichnet kommt die Variable draw zum einsatz (mit dem == heißt es wird vergleichen)

X und Y Koordinaten der Maus (somit kann ich überall im Feld zeichnen)So breit soll die

Linie sein

Die Linie soll sowohl auf der X Achse als auch auf der Y Achse gezogen werden- also dort wo die Maus sich befindet.

stroke einfache Linien zeichnenfill Linien werden gefüllt

Hier wird der Startpunkt gesetzt

Die Linie soll sich BEWEGEN nach X und Y.

Diese function soll passieren wenn gezeichnet wird

Es soll aufgehört werden zu zeichnenNicht näher definiert- weil nur aufgehört wird zu zeichnen

„Schalter“ wird wieder umgelegt auf false