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

10
MAYA K. Canvas-Projekt

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

Page 1: MAYA K. Canvas-Projekt. In HTML- body: Canvas tag öffnen seamntsiches HTML) Canvas bekommt eine id (1mal verwenden, mit # angesprochen) Höhe und breite.

MAYA K.

Canvas-Projekt

Page 2: MAYA K. Canvas-Projekt. In HTML- body: Canvas tag öffnen seamntsiches HTML) Canvas bekommt eine id (1mal verwenden, mit # angesprochen) Höhe und breite.

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

Page 3: MAYA K. Canvas-Projekt. In HTML- body: Canvas tag öffnen seamntsiches HTML) Canvas bekommt eine id (1mal verwenden, mit # angesprochen) Höhe und breite.

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

Page 4: MAYA K. Canvas-Projekt. In HTML- body: Canvas tag öffnen seamntsiches HTML) Canvas bekommt eine id (1mal verwenden, mit # angesprochen) Höhe und breite.

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!

Page 5: MAYA K. Canvas-Projekt. In HTML- body: Canvas tag öffnen seamntsiches HTML) Canvas bekommt eine id (1mal verwenden, mit # angesprochen) Höhe und breite.

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

Page 6: MAYA K. Canvas-Projekt. In HTML- body: Canvas tag öffnen seamntsiches HTML) Canvas bekommt eine id (1mal verwenden, mit # angesprochen) Höhe und breite.

Im 2 dimensionalen Bereich wird gezeichnet

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

Page 7: MAYA K. Canvas-Projekt. In HTML- body: Canvas tag öffnen seamntsiches HTML) Canvas bekommt eine id (1mal verwenden, mit # angesprochen) Höhe und breite.

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

Page 8: MAYA K. Canvas-Projekt. In HTML- body: Canvas tag öffnen seamntsiches HTML) Canvas bekommt eine id (1mal verwenden, mit # angesprochen) Höhe und breite.

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

Page 9: MAYA K. Canvas-Projekt. In HTML- body: Canvas tag öffnen seamntsiches HTML) Canvas bekommt eine id (1mal verwenden, mit # angesprochen) Höhe und breite.

Hier wird der Startpunkt gesetzt

Die Linie soll sich BEWEGEN nach X und Y.

Diese function soll passieren wenn gezeichnet wird

Page 10: MAYA K. Canvas-Projekt. In HTML- body: Canvas tag öffnen seamntsiches HTML) Canvas bekommt eine id (1mal verwenden, mit # angesprochen) Höhe und breite.

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

„Schalter“ wird wieder umgelegt auf false