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.
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 (breite, hoehe, canvasID, mitRaster) {
// 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 <= breite; koX = 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 <= hoehe; koY = 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:
- Wert für a (Positive oder negative Zahl, Variable _fa)
- Wert für b (Positive oder negative Zahl, Variable _fb)
- Wert für c (Positive oder negative Zahl, Variable _fc)
- Wert für d (Positive oder negative Zahl, Variable _fd)
- ID des Canvas (String, Variable _canvasID)
- HEX-Wert einer Farbe (String, Variable _farbe)
- Skalierung über die X-Achse (Integerwert, Variable _skalX)
- Skalierung über die Y-Achse (Integerwert, Variable _skalY)
function zeichneFunktion(fa, fb, fc, fd, canvasID, farbe, skalX, skalY) {
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(px, py, 1, 0, Math.PI * 2, true);
}
funktionZeichnung.stroke();
}
