Date post: | 06-Apr-2016 |
Category: |
Documents |
Upload: | heike-bader |
View: | 221 times |
Download: | 2 times |
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