• Zeichnen mit Javascript
  • anonym
  • 21.03.2018
  • Mittlere Reife
Um die Lizenzinformationen zu sehen, klicken Sie bitte den gewünschten Inhalt an.
  • https://www.tutory.de/w/a2249cb0
    1
    Heute zeichnen wir mit Javascript. Dazu benötigen wir ein sogenanntes canvas Element (auf deutsch: Leinwand). Gehe hierzu wieder auf www.jsbin.com
    • Am Anfang benötigst du die Ansichten HTML und Output. Alles andere kannst du ausblenden.

    • Füge im HTML Code folgende Zeile zwischen die beiden <body> tags. Alle Elemente die hier dazwischen stehen werden in der Output Ansicht angezeigt. So erzeugen wir unsere 'Leinwand'.

      <canvas id=meinCanvas height="500" width="500" style="border:3px solid grey"></canvas>

      Diese sollte nun erscheinen. Experimente mit den Werten für height, width und border und schau was passiert.
    2
    Du kannst nun die HTML Ansicht ausblenden und stattdessen die Javascript Ansicht einblenden.
    • Zuerst müssen wir unser canvas Element in einer Variable speichern, damit wir gleich damit zeichnen können. Das geht wie folgt:

      var leinwand = document.getElementById('meinCanvas').getContext('2d')

    • Jedes mal wenn wir anfangen ein neues Objekt zu zeichnen schreiben wir:

      leinwand.beginPath()

    • Du kannst die Farbe des Striches wie folgt festlegen z.b. grün:

      leinwand.strokeStyle='green' und die Farbe der Füllung mit leinwand.fillStyle='blue'

    3
    Striche zeichnen:

    Du kannst die den Stift an einen bestimmten Punkt bewegen mit leinwand.moveTo(x,y) wobei x und y jeweils für die Koordinaten stehen (siehe Grafik rechts).

    Du kannst einen Strich von der momentanen Position aus zeichnen mit leinwand.lineTo(x,y)

    Um diese Linie auch wirklich sichtbar zu machen schreibe noch: leinwand.stroke()
    Canvas Koordinatensystem
    Canvas Koordinatensystem
    4
    Viereck zeichnen

    Zeichne ein Viereck mit leinwand.rect(x,y, breite, höhe) z.b. leinwand.rect(20,10, 200, 50) zeichnet ein Rechteck an Position (20,10) mit breite 200 und Höhe 50.

    Nicht vergessen: leinwand.stroke()

    Möchtest du das Viereck mit Farbe füllen: leinwand.fill()
    5
    Kreis zeichnen

    Zeichne einen Kreis mit leinwand.arc(x, y, radius, 0, 2*Math.PI)
    6
    Zeichne etwas cooles! Nutze auch eine for-Schleife um 1000 Objekte auf einmal zu zeichnen.