2d Canvas
als Präsentation ▻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:
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();
Bild kopieren
var canvas = document.getElementById("e"); var context = canvas.getContext("2d"); var image = document.getElementById("the_img_tag"); context.drawImage(image, 0, 0);
Referenz
Tutorials
Aufbauend auf den Canvas gibt es viele Libraries, z.B:
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.
Kapitel
- Das Web Und Html
- Css
- Css Layout
- Urls
- Formulare
- Javascript Dom
- Jquery
- Kommandozeile
- Git
- Http
- Php Vorbereitung
- Php
- Php Db Lesen
- Session
- Php Db Schreiben
- Php Db Optimierung
- Grafik
- Javascript
- Applied Jquery And Css
- Json
- Xml
- Security
- Injection
- Authentifizierung und Session-Management
- Cross Site Scripting (XSS)
- Unsichere direkte Objektreferenzen
- Sicherheitsrelevante Fehlkonfiguration
- Verlust der Vertraulichkeit sensibler Daten
- Fehlerhafte Autorisierung auf Anwendungsebene
- Cross-Site Request Forgery (CSRF)
- Nutzung von Komponenten mit bekannten Schwachstellen
- Ungeprüfte Um- und Weiterleitungen
- Wordpress
- Apache
- Advanced Javascript
- Qualitaet