Offtopic Projekte
Kommentare Zurück zur Übersicht

Koordinatensystem in einem Canvas

Mit dem Canvas-Element kann man schöne interaktive Sachen zeichnen. So wie hier ein Koordiantensystem mit oder ohne Raster und eine Funktion dritten Grades. Einfach zuerst die Breite und Höhe in Pixel eingeben. Entscheiden, ob man ein Raster haben will und dann auf Neu Zeichnen klicken. Fertig.

Unter dem Koordinatensystem sind die Eingabemöglichkeiten für eine Funktion dritten Grades. Scale x und Scale y skalieren die Funtion. Es ist notwendig, weil sonst manche Funktionskurven nicht schön dargestellt werden. Dann kann man sich für eine Frabe entscheiden. Rot ist schon vorgeben. Neben dem Farbauswähler ist die Funktionsgleichung mit dem Muster: f(x) = ax³ + bx² + cx + d
Die Zahlen lassen sich durch einen Klick darauf ändern. Oder man navigiert mit der Tabulatortaste. Nachdem alles eingestellt wurde, klickt man auf Funktion zeichnen. Die Funktion wird nochmals in einer Liste darunter dargestellt. Nach der ersten Funktionskurfe gibt es auch die Möglichkeit das Koordinatensystem mit Funktionskurven als PNG zu speichern.

Breite: Höhe: Mit Raster zeichnen Neu Zeichnen
Kein Canvas Support

Scale x (50) Scale y (1)

f(x) = ax³ + bx² + cx + d

a =
b =
c =
d =

Funktion zeichnen Alles löschen Bild speichern

Soviel so gut - hier der Code. Zuerst brauchen wir ein Canvas Element mit einem ID Attribut.

<canvas id="meinCanvas">Kein Canvas Support</canvas>

Dann kommt das JavaScript, welches das Koordiantensystem mit/oder ohne Raster zeichnet.
Der Funktionsaufruf lautet: zeichneKoordinatensystem(400, 400, "meinCanvas", true); um ein Canvas mit einer Größe von 400 x 400 Pixel zu zeichnen. Die ID des Canvas-Element muss unter Anführungszeichen angeführt werden. Ein true zeichnet ein Raster.

function zeichneKoordinatensystem (breitehoehecanvasIDmitRaster) {

  // Die Größen des Canvas werden zugewiesen  
  document.getElementById(canvasID).height = hoehe;
  document.getElementById(canvasID).width = breite;
  
  // Raster wird erstellt
  var Raster = document.getElementById(canvasID).getContext("2d");
  
  if (mitRaster == true) {
    Raster.beginPath();
      
      // Vertikale Linien mit 10 Pixel Abstand entlang der X Achse
      for (var koX = 10; koX <= breitekoX = koX + 10) {
          Raster.moveTo(koX,0);
          Raster.lineTo(koX,hoehe);
      }
  
      // Horizontale Linien mit 10 Pixel Abstand entlang der Y Achse
      for (var koY = 10; koY <= hoehekoY = koY + 10) {
          Raster.moveTo(0,koY);
          Raster.lineTo(breite,koY);
      }
  
    Raster.strokeStyle="#CEECF5";
    Raster.stroke();
  }
  
  // Koordinatensystem wird erstellt
  var kSystem = document.getElementById(canvasID).getContext("2d");
  
  // Das Koordinatenkreuz wird gezeichnet
  kSystem.beginPath();
  kSystem.moveTo(breite / 2, 10);
  kSystem.lineTo(breite / 2, hoehe - 10);
  kSystem.moveTo(10, hoehe / 2);
  kSystem.lineTo(breite - 10, hoehe / 2);
  
  // Die Beschriftung des Koordinantensystems
  kSystem.font = "20px Arial";
  kSystem.fillText("X", 20, (hoehe/2) + 30);
  kSystem.fillText("Y", (breite / 2) + 20, 40);

  // Pfeilspitzen
  kSystem.fillText("\u02C4", (breite / 2) - 6, 15); // Pfeil rauf
  kSystem.fillText("\u02C5", (breite / 2) - 6, hoehe - 5); // Pfeil runter 
  kSystem.fillText("\u02C2", 2, (hoehe/2) + 7); // Pfeil links
  kSystem.fillText("\u02C3", breite - 15, (hoehe/2) + 7); // Pfeil rechts
  
  // Der Auftrag zum Zeichnen mit der Farbe Schwarz
  kSystem.strokeStyle="#000000";
  kSystem.stroke();
  }

Der Code ist schon gut mit Kommentaren beschrieben worden. Interessant sind die Pfeilspitzen. Dafür wird auf den UNICODE Zeichensatz referiert. \u02C4 steht für die Pfeilspitze rauf.

// Pfeilspitzen mit UNICODE
kSystem.fillText("\u02C4", (breite / 2) - 6, 15); // Pfeil rauf
kSystem.fillText("\u02C5", (breite / 2) - 6, hoehe - 5); // Pfeil runter 
kSystem.fillText("\u02C2", 2, (hoehe/2) + 7); // Pfeil links
kSystem.fillText("\u02C3", breite - 15, (hoehe/2) + 7); // Pfeil recht

Weil aber die Pfeilspitzen mit UNICODE nicht präzise genug sind und bei meinen Tests auf unterschiedlichen Browsern nicht genau dargestellt wurden, liefere ich noch eine weitere Pfeilspitzenlösung. Einfach den Code ersetzen ... wenn man will.

// Pfeilspitzen mit Linien
kSystem.moveTo(breite/2, 10);
kSystem.lineTo(breite/2-10, 30);
kSystem.moveTo(breite/2, 10);
kSystem.lineTo(breite/2+10, 30);

kSystem.moveTo(breite/2, hoehe-10);
kSystem.lineTo(breite/2-10, hoehe-30);
kSystem.moveTo(breite/2, hoehe-10);
kSystem.lineTo(breite/2+10, hoehe-30);

kSystem.moveTo(10, hoehe/2);
kSystem.lineTo(30, hoehe/2+10);
kSystem.moveTo(10, hoehe/2);
kSystem.lineTo(30, hoehe/2-10);

kSystem.moveTo(breite-10, hoehe/2);
kSystem.lineTo(breite-30, hoehe/2+10);
kSystem.moveTo(breite-10, hoehe/2);
kSystem.lineTo(breite-30, hoehe/2-10);
Der Aufruf zur Zeichnung einer Funktionskurve ist schon etwas länger.
Will man z. B. folgende Funktion einzeichnen: f(x) = -3x³ + 5x² - 4x + 100
Dann lautet der Funktionsaufruf:
zeichneFunktion(-3, 5, -4, 100, "meinCanvas", "#ff0000", 50, 1);
Die Erklärung der Wertübergaben:
  1. Wert für a (Positive oder negative Zahl, Variable _fa)
  2. Wert für b (Positive oder negative Zahl, Variable _fb)
  3. Wert für c (Positive oder negative Zahl, Variable _fc)
  4. Wert für d (Positive oder negative Zahl, Variable _fd)
  5. ID des Canvas (String, Variable _canvasID)
  6. HEX-Wert einer Farbe (String, Variable _farbe)
  7. Skalierung über die X-Achse (Integerwert, Variable _skalX)
  8. Skalierung über die Y-Achse (Integerwert, Variable _skalY)
function zeichneFunktion(fafbfcfdcanvasIDfarbeskalXskalY) {
    var dasCanvas = document.getElementById(canvasID);
    var cBreite = dasCanvas.width;
    var cHoehe = dasCanvas.height;
  
    var funktionZeichnung = dasCanvas.getContext("2d");
        funktionZeichnung.beginPath();
        funktionZeichnung.strokeStyle = farbe;
  
    for (var fx = cBreite / (-2); fx <= (cBreite / 2); fx = fx + 0.01) {
  
        fy = Math.pow(fx, 3) * fa + Math.pow(fx, 2) * fb + fc * fx + Number(fd);
        var px = fx * skalX + (cBreite / 2);
        var py = (fy * -1 * skalY) + (cHoehe / 2);
  
        funktionZeichnung.arc(pxpy, 1, 0, Math.PI * 2, true);
  
    }
  
    funktionZeichnung.stroke();
  }
24. Jun 2024 - 14:50
Hier könnte dein Kommentar stehen!

Thomas Maier css4.at Logo
Thomas Maier Impressum OER: CC BY NC SA 2022-08-10