Kapitel 5: Canvas
Auf dieser Seite finden Sie alle im Buch HTML5: Leitfaden für Webentwickler verwendeten Beispiele, Grafiken und Links für dieses Kapitel. Die erste Tabelle listet Beispiele und Grafiken mit Seitenzahlen im Buch auf, stellt Links (sofern relevant) zur Online-Version der Seite sowie Angaben zur Browserkompatibilität bereit und zeigt eine Vorschau der Abbildung im Buch. Beim Klick auf dieses Vorschaubild wird die Abbildung in Originalgröße im Format JPEG geladen. Die zweite Tabelle listet alle URLs auf, die im Buch auf den jeweiligen Seiten genannt sind. Für Feedback und Bug-Reports stehen ihnen E-Mail sowie ein eigenes Ticket-System zur Verfügung, in dem Sie neue Kommentare absetzen und bestehende Kommentare / Errata auch Online mitverfolgen können.
| Seite | Beispiel / Grafik | Screenshot |
|---|---|---|
| 133 | Abbildung 5.1: Zwei überlappende Rechtecke Erstellt mit Firefox 3.6 Läuft mit Firefox 3.6, Opera 10.6, Chrome 6, Safari 5, IE 9b |  |
| 134 | Abbildung 5.2: Balkendiagramm mit zehn horizontalen Balken Erstellt mit Firefox 3.6 Läuft mit Firefox 3.6, Opera 10.6, Chrome 6, Safari 5, IE 9b |  |
| 135 | Abbildung 5.3: Das Canvas-Koordinatensystem Erstellt mit Firefox 3.6 Läuft mit Firefox 3.6, Opera 10.6, Chrome 6, Safari 5, IE 9b (Achsenbeschriftungen fehlen, Layoutfehler bei y) |  |
| 139 | Abbildung 5.4: Lineare Gradiente mit vier Farben Erstellt mit Firefox 3.6 Läuft mit Firefox 3.6, Opera 10.6, Chrome 6, Safari 5, IE 9b (Layoutfehler bei red) |  |
| 140 | Abbildung 5.5: Komponenten einer radialen Gradiente Erstellt mit Firefox 3.6 Läuft mit Firefox 3.6, Opera 10.6, Chrome 6, Safari 5, IE 9b (Layoutfehler bei rgba) |  |
| 142 | Abbildung 5.6: Der Buchstabe A als Pfad Erstellt mit Firefox 3.6 Läuft mit Firefox 3.6, Opera 10.6, Chrome 6, Safari 5, IE 9b (Achsenbeschriftungen fehlen) |  |
| 143 | Abbildung 5.7: Die Pfadmethode »lineTo()« Erstellt mit Firefox 3.6 Läuft mit Firefox 3.6, Opera 10.6, Chrome 6, Safari 5, IE 9b |  |
| 144 | Abbildung 5.8: Die Pfadmethode »quadraticCurveTo()« Erstellt mit Firefox 3.6 Läuft mit Firefox 3.6, Opera 10.6, Chrome 6, Safari 5, IE 9b |  |
| 144 | Abbildung 5.9: Die Pfadmethode »bezierCurveTo()« Erstellt mit Firefox 3.6 Läuft mit Firefox 3.6, Opera 10.6, Chrome 6, Safari 5, IE 9b |  |
| 145 | Abbildung 5.10: Die Pfadmethode »arcTo()« Erstellt mit Firefox 3.6 Läuft mit Firefox 3.6, Opera 10.6 (Methode arcTo() falsch implementiert), Chrome 6, Safari 5, IE 9b |  |
| 146 | Abbildung 5.11: Vier Rechtecke mit gerundeten Ecken – der Kreis ist der Extremfall eines gerundeten Rechtecks Erstellt mit Firefox 3.6 Läuft mit Firefox 3.6, Opera 10.6 (Methode arcTo() falsch implementiert), Chrome 6, Safari 5, IE 9b (Methode arcTo() falsch implementiert) |  |
| 147 | Abbildung 5.12: Die Pfadmethode »arc()« Erstellt mit Firefox 3.6 Läuft mit Firefox 3.6, Opera 10.6, Chrome 6, Safari 5, IE 9b |  |
| 149 | Abbildung 5.13: Kreise und Kreissektoren Erstellt mit Firefox 3.6 Läuft mit Firefox 3.6, Opera 10.6, Chrome 6, Safari 5, IE 9b |  |
| 150 | Abbildung 5.14: Die Pfadmethode »rect()« Erstellt mit Firefox 3.6 Läuft mit Firefox 3.6, Opera 10.6, Chrome 6, Safari 5, IE 9b |  |
| 151 | Abbildung 5.15: Attribute für Linienstile Erstellt mit Firefox 3.6 Läuft mit Firefox 3.6, Opera 10.6, Chrome 6, Safari 5, IE 9b (Layoutfehler bei context.lineWidth) |  |
| 152 | Abbildung 5.16: Die Nonzero-Füllregel bei Pfaden Erstellt mit Firefox 3.6 Läuft mit Firefox 3.6, Opera 10.6, Chrome 6 (NonZero Regel falsch implementiert), Safari 5, IE 9b |  |
| 155 | Abbildung 5.17: Schriftformatierungen mit dem »font«-Attribut Erstellt mit Firefox 3.6 Läuft mit Firefox 3.6 (Font small-caps ist falsch), Opera 10.6 (Font small-caps ist falsch), Chrome 6 (Schriftgrößen sind bei font-size in % Angaben zu klein; @font-face wird nicht unterstützt), Safari 5 (Schriftgrößen sind bei font-size in % Angaben zu klein; @font-face wird nicht unterstützt), IE 9b (Font small-caps ist falsch) |  |
| 157 | Abbildung 5.18: Horizontale Textanfasspunkte mit »textAlign« Erstellt mit Firefox 3.6 Läuft mit Firefox 3.6, Opera 10.6, Chrome 6 (Das Satzzeichen steht bei document.dir=rtl nicht links), Safari 5 (Das Satzzeichen steht bei document.dir=rtl nicht links), IE 9b (Text wird nicht angezeigt) |  |
| 158 | Abbildung 5.19: Vertikale Textanfasspunkte mit »textBaseline« Erstellt mit Firefox 3.6 Läuft mit Firefox 3.6, Opera 10.6, Chrome 6, Safari 5, IE 9b |  |
| 159 | Abbildung 5.20: »fillText()«, »strokeText()« und »measureText()« Erstellt mit Firefox 3.6 Läuft mit Firefox 3.6, Opera 10.6, Chrome 6 (maxLength nicht implementiert), Safari 5 (maxLength nicht implementiert), IE 9b |  |
| 160 | Abbildung 5.21: Positionsparameter der »drawImage()«-Methode Erstellt mit Firefox 3.6 Läuft mit Firefox 3.6, Opera 10.6, Chrome 6, Safari 5, IE 9b (Layoutfehler bei image) |  |
| 161 | Abbildung 5.22: Das Quellbild für alle »drawImage()«-Beispiele Erstellt mit Firefox 3.6 Läuft mit Firefox 3.6, Opera 10.6, Chrome 6 (die Schatten bei strokeRect sind falsch - Rechteck wird transparent weiß gefüllt), Safari 5, IE 9b (Layoutfehler bei vertikalen Texten, Texte 1200 und 600 fehlen) |  |
| 162 | Abbildung 5.23: Der Taft Point im Yosemite-Nationalpark Erstellt mit Firefox 3.6 Läuft mit Firefox 3.6, Opera 10.6, Chrome 6, Safari 5, IE 9b |  |
| 162 | Abbildung 5.24: Der Taft Point mit El Capitan im Yosemite-Nationalpark Erstellt mit Firefox 3.6 Läuft mit Firefox 3.6, Opera 10.6, Chrome 6, Safari 5, IE 9b |  |
| 163 | Abbildung 5.25: Yosemite-Nationalpark-Postkarte Erstellt mit Firefox 3.6 Läuft mit Firefox 3.6, Opera 10.6, Chrome 6, Safari 5, IE 9b |  |
| 164 | Abbildung 5.26: Yosemite-Nationalpark-Postkarte (alternatives Layout) Erstellt mit Firefox 3.6 Läuft mit Firefox 3.6, Opera 10.6, Chrome 6, Safari 5, IE 9b |  |
| 165 | Abbildung 5.27: Das »ImageData«-Objekt Erstellt mit Firefox 3.6 Läuft mit Firefox 3.6, Opera 10.6, Chrome 6, Safari 5, IE 9b (Layoutfehler beim vertikalen Text und den rgba-Werten) |  |
| 167 | Abbildung 5.28: Modifizieren von Farben im »CanvasPixelArray« Erstellt mit Firefox 3.6 Läuft mit Firefox 3.6, Opera 10.6, Chrome 6, Safari 5, IE 9b |  |
| 169 | Abbildung 5.29: Farbmanipulation mit »getImageData()« und »putImageData()« Erstellt mit Firefox 3.6 Läuft mit Firefox 3.6, Opera 10.6 (Methode createImageData() nicht implementiert), Chrome 6 (createImageData() nicht implementiert), Safari 5, IE 9b |  |
| 173 | Abbildung 5.30: Werte des »globalCompositeOperation«-Attributs Erstellt mit Firefox 4.0b Läuft mit Firefox 4.0b, Opera 10.6, Chrome 6 (source-in, source-out, destination-in, destination-atop und copy sind falsch), Safari 5 (source-in, source-out, destination-in, destination-atop und copy sind falsch) |  |
| 174 | Abbildung 5.31: Compositing-Operation »destination-in« mit Bild und Text Erstellt mit Firefox 3.6 Läuft mit Firefox 3.6, Opera 10.6 (Rendering ist falsch), Chrome 6 (destination-in falsch implementiert, maxLength falsch bei Untertitel), Safari 5 (destination-in falsch implementiert, maxLength falsch bei Untertitel) |  |
| 175 | Abbildung 5.32: Compositing-Operation »lighter« mit 16 Grundfarben Erstellt mit Firefox 3.6 Läuft mit Firefox 3.6, Opera 10.6, Chrome 6, Safari 5 |  |
| 176 | Abbildung 5.33: Schachbrettmuster in 8 Farbkombinationen Erstellt mit Firefox 3.6 Läuft mit Firefox 3.6, Opera 10.6, Chrome 6 (createPattern mit Canvas falsch implementiert), Safari 5, IE 9b |  |
| 177 | Abbildung 5.34: Muster mit Bildern als Quelle Erstellt mit Firefox 3.6 Läuft mit Firefox 3.6, Opera 10.6, Chrome 6 (Legenden Patterns fehlerhaft), Safari 5, IE 9b |  |
| 180 | Abbildung 5.35: Die Grundtransformationen »scale()«, »rotate()« und »translate()« Erstellt mit Firefox 3.6 Läuft mit Firefox 3.6, Opera 10.6, Chrome 6, Safari 5, IE 9b |  |
| 181 | Abbildung 5.36: Rotieren, skalieren und verschieben Erstellt mit Firefox 3.6 Läuft mit Firefox 3.6, Opera 10.6, Chrome 7, Safari 5, IE 9b |  |
| 184 | Abbildung 5.37: Foto-Collage mit Spiegeleffekt im Pseudo-3D-Raum Erstellt mit Firefox 3.6 Läuft mit Firefox 3.6, Opera 10.6, Chrome 6, Safari 5, IE 9b (Schatten falsch wegen fehlendem Compositing) |  |
| 191 | Abbildung 5.38: Animation mit farbigen Kugeln Erstellt mit Firefox 3.6 Läuft mit Firefox 3.6, Opera 10.6, Chrome 6, Safari 5, IE 9b |  |
| 193 | Abbildung 5.39: HSL-Farben für die Animation mit farbigen Kugeln Erstellt mit Firefox 3.6 Läuft mit Firefox 3.6, Opera 10.6, Chrome 6, Safari 5, IE 9b |  |
| 194 | Abbildung 5.40: Yosemite-Nationalpark-Videopostkarte Erstellt mit Firefox 4.0b Läuft mit Firefox 4.0b (Hintergrund ist falsch beim Restart), Opera 10.6 (Hintergrund ist falsch beim Restart), Chrome 6 (Hintergrund ist falsch beim Restart) |  |