Fork me on GitHub

Web Development

Ein Lehrbuch für das Informatik oder Medien-Informatik Studium.

Der canvas Tag kann auf zwei Arten verwendet werden: für 2d und 3d Grafik. Als 2d Grafik ist der Canvas einfach ein Rechteck aus Pixeln, auf das man mit Javascript zeichnen und Bilder einkopieren kann:

Bild

Das Koordinatensystem des Canvas beginnt links oben. Es wird der “Painters Algorithm” verwendet: später gezeichnets übermalt früher gezeichnetes. Egal ob Text, Linie, Bild, alles wird in einzelne Pixel verwandelt. Man kann später nicht mehr identifizieren welches Pixel vom Text, oder welches vom Bild stammt.

Canvas und Javascript

Um den Canvas zu nutzen braucht es immer zwei Schritte: erst die DOM-Node des Canvas finden, dann den 2d-Kontext dieses Canvas:

var w = 250,
    h = 250;
var my_canvas = document.getElementById("c");
var my_context = my_canvas.getContext("2d");

my_canvas.width = w;
my_canvas.height = h;

Text setzen

my_context.font = "bold 12px sans-serif";
my_context.fillText("hier bin ich", 30, 50);

Linien Zeichnen

my_context.moveTo(0,20);
my_context.lineTo(w,20);

for (var x = 0; x <= w; x += 25) {
    my_context.moveTo(w / 2, h / 2);
    my_context.lineTo(x, h);
}
my_context.stroke();

fertiges bild

Bild kopieren

var canvas = document.getElementById("e");
var context = canvas.getContext("2d");
var image = document.getElementById("the_img_tag");
context.drawImage(image, 0, 0);

Tutorials

Library

Aufbauend auf den Canvas gibt es viele Libraries, z.B:

Webcam

Mit der getUserMedia API kann man von einer Webcam entweder Standbilder oder Video Streams übertragen. Die Kombination Webcam + 2d Canvas ermöglicht damit viele interessante Anwendungen.