• Zeichnen mit Javascript
  • anonym
  • 30.06.2020
  • Mittlere Reife
Um die Lizenzinformationen zu sehen, klicken Sie bitte den gewünschten Inhalt an.
1
Heute zeich­nen wir mit Ja­va­script. Dazu be­nö­ti­gen wir ein so­ge­nann­tes can­vas Ele­ment (auf deutsch: Lein­wand). Gehe hier­zu wie­der auf www.jsbin.com
  • Am An­fang be­nö­tigst du die An­sich­ten HTML und Out­put. Alles an­de­re kannst du aus­blen­den.

  • Füge im HTML Code fol­gen­de Zeile zwi­schen die bei­den <body> tags. Alle Ele­men­te die hier da­zwi­schen ste­hen wer­den in der Out­put An­sicht an­ge­zeigt. So er­zeu­gen wir un­se­re 'Lein­wand'.

    <can­vas id=mein­Can­vas height="500" width="500" style="bor­der:3px solid grey"></can­vas>

    Diese soll­te nun er­schei­nen. Ex­pe­ri­men­te mit den Wer­ten für height, width und bor­der und schau was pas­siert.
2
Du kannst nun die HTML An­sicht aus­blen­den und statt­des­sen die Ja­va­script An­sicht ein­blen­den.
  • Zu­erst müs­sen wir unser can­vas Ele­ment in einer Va­ria­ble spei­chern, damit wir gleich damit zeich­nen kön­nen. Das geht wie folgt:

    var lein­wand = do­cu­ment.get­Ele­ment­By­Id('mein­Can­vas').get­Con­text('2d')

  • Jedes mal wenn wir an­fan­gen ein neues Ob­jekt zu zeich­nen schrei­ben wir:

    lein­wand.be­gin­Path()

  • Du kannst die Farbe des Stri­ches wie folgt fest­le­gen z.b. grün:

    lein­wand.stroke­Style='green' und die Farbe der Fül­lung mit lein­wand.fill­Style='blue'

3
Stri­che zeich­nen:

Du kannst die den Stift an einen be­stimm­ten Punkt be­we­gen mit lein­wand.mo­ve­To(x,y) wobei x und y je­weils für die Ko­or­di­na­ten ste­hen (siehe Gra­fik rechts).

Du kannst einen Strich von der mo­men­ta­nen Po­si­ti­on aus zeich­nen mit lein­wand.li­ne­To(x,y)

Um diese Linie auch wirk­lich sicht­bar zu ma­chen schrei­be noch: lein­wand.stro­ke()
Canvas Koordinatensystem
4
Vier­eck zeich­nen

Zeich­ne ein Vier­eck mit lein­wand.rect(x,y, brei­te, höhe) z.b. lein­wand.rect(20,10, 200, 50) zeich­net ein Recht­eck an Po­si­ti­on (20,10) mit brei­te 200 und Höhe 50.

Nicht ver­ges­sen: lein­wand.stro­ke()

Möch­test du das Vier­eck mit Farbe fül­len: lein­wand.fill()
5
Kreis zeich­nen

Zeich­ne einen Kreis mit lein­wand.arc(x, y, ra­di­us, 0, 2*Math.PI)
6
Zeich­ne etwas coo­les! Nutze auch eine for-​Schleife um 1000 Ob­jek­te auf ein­mal zu zeich­nen.