Graphiken

In HTML kann man, in Verbindung mit Javascript, Graphiken erstellen.

Hierzu wird der Befehl < canvas id="myCanvas" width="200" height="100" > </canvas > benutzt.

Mit dem Befehl < canvas id="myCanvas" width="300" height="100" style="border:4px solid #000000;"> < /canvas > kann man die Rahmenbreite und -farbe festlegen

Nachdem man die Größe für den Graphikbereich festgelegt hat, werden mittels Javascript Elemente gezeichnet.

Folgendes Beispiel zeigt wie eine Funktion zum Zeichnen einer Linie aussehen könnte. Probiere es selbst aus und spiele auch mal mit den Koordinaten.

function linie(){

var c = document.getElementById("myCanvas"); // diese Festlegung muss man immer vornehmen

var ctx = c.getContext("2d"); // diese Festlegung muss man immer vornehmen

ctx.moveTo(0, 0); // legt den Anfangspunkt der Linie fest

ctx.lineTo(200, 100); // bestimmt den Endpunkt der Linie

ctx.stroke(); //zeichnet die Linie

}

Video

Aufgaben

1. Zeichne eine beliebige Linie.

2. Zeichne eine gerade Linie mit der Länge 100 Pixel

3. Zeichne den Buchstaben V