2D Canvas
als Präsentation ▻Zeichnen im Canvas
Der Canvas-Tag stellt eine rechteckige Zeichenfläche zur Verfügung. Es handelt sich dabei um eine Matrix von Pixeln, siehe SVG für Vektor-Grafik.
Der Canvas wird durch zwei Objekte in Javascript repräsentiert: ein Canvas-Objekt und ein Context-Objekt. Zuerste müssen wir diese beiden Objekte finden und in Variablen speichern:
let my_canvas = document.getElementById("c"); let my_context = my_canvas.getContext("2d");
Wir verwenden erst einmal die 2-dimensionale Zeichenfläche des Canvas. Wenn Sie mehr von Computergrafik verstehen können Sie auch die 3d-Version, genannt „webgl“ verwenden.
Eine gute Möglichkeit Canvas auszuprobieren ist dieses jsfiddle.
▻Die Darstellung des Canvas funktioniert erst mal nur bei
einem devicePixelRatio
von 1 gut. Für höhere Pixeldichte muss
man die Größe des Canvas extra setzen:
let canvas = document.getElementById(id); let ctx = canvas.getContext("2d"); let scale = window.devicePixelRatio; console.log(`creating a canvas with ${canvas_width} x ${canvas_height} css pixels at devicePixelRatio ${window.devicePixelRatio}`); // set canvas.width to real pixels - will never be used again! canvas.width = canvas_width * scale; canvas.height = canvas_height * scale; ctx.scale(scale,scale) // set style.width to virtual pixels, we will work with virtual pixels from now on canvas.style.width = canvas_width + "px"; canvas.style.height = canvas_height + "px";
Achsenparallelle Rechtecke zeichnet man mit fillRect:
my_context.fillRect(50, 50, 20, 20);
Linien ziehen kann man mit moveTo und lineTo. Die Linie erscheint erst, wenn man die abschließende Stroke-Methode aufruft:
my_context.moveTo(10, 20); my_context.lineTo(10, 50); my_context.strokeStyle = "#4a4"; my_context.stroke();
Text auf den Canvas schreiben kann man mit dem font-Befehl:
my_context.font = "bold 12px sans-serif"; my_context.fillText("hier bin ich", 10, 50);
Bilder die sich bereits in der Webseite befinden kann man in den Canvas kopieren:
let cat = document.getElementById("cat"); my_context.drawImage(cat, 0, 0);
Man kann ganz neue Bilder laden. Achtung: da das Laden eines Bildes einige Zeit dauert verwenden wir hier das onload Event: erst wenn das Bild fertig geladen ist wird es in den Canvas kopiert:
let cat = new Image(); cat.src = "images/cat.png"; cat.onload = function() { my_context.drawImage(cat, 0, 0); };
Diese Beispiel zu Canvas stammen alle aus dem Canvas-Kapitel von Mark Pilgrims „Dive into HTML5“.
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