HTML5 Canvas

(Navigation mit den Pfeiltasten. Zoom mit +/-. Das Logo ist klickbar.)

Hochschule für Technik, Wirtschaft und Kultur Leipzig [FH]
Philipp Zins, Webtechnologien

00

HTML5 Canvas

Gliederung

  1. Was ist Canvas?
  2. Wie verwende ich Canvas?

Hochschule für Technik, Wirtschaft und Kultur Leipzig [FH]
Philipp Zins, Webtechnologien

00

HTML5 Canvas

Was ist Canvas?

Hmm... Theorie?

Hochschule für Technik, Wirtschaft und Kultur Leipzig [FH]
Philipp Zins, Webtechnologien

00

HTML5 Canvas

"HTML5 Canvas is an immediate mode bitmapped area of the screen that can be manipulated with JavaScript."

Steve Fulton, Jeff Fulton; "HTML5 Canvas"; O'Reilly

WTF?!?

Hochschule für Technik, Wirtschaft und Kultur Leipzig [FH]
Philipp Zins, Webtechnologien

00

HTML5 Canvas

"bitmapped area of the screen"

  • Bitmap = Rastergrafik
  • basiert auf Pixeln, nicht auf Vektoren
  • = Ein Bereich, in dem Pixeldaten dargestellt werden.

Hochschule für Technik, Wirtschaft und Kultur Leipzig [FH]
Philipp Zins, Webtechnologien

00

HTML5 Canvas

"immediate mode"

  • anzuzeigende Daten in Pixelbuffer (Buffer = temporärer Speicher)
  • nur Pixel, keine Grafikobjekte

Gegenteil: retained mode

  • anzuzeigende Daten in Display List
  • Grafikobjekt besitzen Attribute (Größe, Position, etc.)

zwei Renderingverfahren (Rendering = Darstellung)

Hochschule für Technik, Wirtschaft und Kultur Leipzig [FH]
Philipp Zins, Webtechnologien

00

HTML5 Canvas

Vergleich

Vergleich: immediate mode und retained mode

Hochschule für Technik, Wirtschaft und Kultur Leipzig [FH]
Philipp Zins, Webtechnologien

00

HTML5 Canvas

"can be manipulated with JavaScript"

  • Manipulation der Pixeldaten
  • low-level API: nur rudimentäre, grundlegende Funktionen
  • = sehr flexibel
  • retained mode emulieren: EaselJS
  • = dadurch (teilweise) komplexer

Hochschule für Technik, Wirtschaft und Kultur Leipzig [FH]
Philipp Zins, Webtechnologien

00

HTML5 Canvas

Sonstiges

  • Teil der HTML5 Spezifikation
  • Verwendung: Bildbearbeitung, Datenvisualisierung, Animationen, Spiele

Hochschule für Technik, Wirtschaft und Kultur Leipzig [FH]
Philipp Zins, Webtechnologien

00

HTML5 Canvas

Verbreitung

Browserkompatibilität für Canvas

caniuse.com

Hochschule für Technik, Wirtschaft und Kultur Leipzig [FH]
Philipp Zins, Webtechnologien

00

HTML5 Canvas

Wie verwende ich Canvas?

Praxis! Booyah!

Hochschule für Technik, Wirtschaft und Kultur Leipzig [FH]
Philipp Zins, Webtechnologien

00

HTML5 Canvas

Canvas in HTML erstellen:

                    
                        Ihr Browser unterstützt kein Canvas.
                    
                

Optional: Canvas in CSS stylen:

                    #myCanvas {
                        border: 1px solid #777777;
                    }
                
Ihr Browser unterstützt kein Canvas.

Hochschule für Technik, Wirtschaft und Kultur Leipzig [FH]
Philipp Zins, Webtechnologien

00

HTML5 Canvas

Canvas in JavaScript referenzieren:

                    var canvas = document.getElementById("myCanvas");
                

Nachfolgender Code baut auf vorigen auf und ist komplett in JavaScript.

Context abrufen:

                    var context = canvas.getContext(contextId);
                

Hochschule für Technik, Wirtschaft und Kultur Leipzig [FH]
Philipp Zins, Webtechnologien

00

HTML5 Canvas

Was bedeutet Context?

  • Context bietet Zeichenoperationen für Canvas
  • verschiedene contextIDs für verschiedene Contexts
    • "2d": für 2D Grafiken (Teil dieser Präsentation)
    • "webgl": für 3D Grafiken (kein Teil von HTML5 = kein Teil dieser Präsentation)

Hochschule für Technik, Wirtschaft und Kultur Leipzig [FH]
Philipp Zins, Webtechnologien

00

HTML5 Canvas

Was bedeutet 2D Context?

  • kartesisches Koordinatensystem
  • Koordinatenursprung oben links
  • x-Wert wird nach rechts größer
  • y-Wert wird nach unten größer
  • zum Zeichnen von Linien, Flächen, Text, anderen Grafiken auf Canvas

Hochschule für Technik, Wirtschaft und Kultur Leipzig [FH]
Philipp Zins, Webtechnologien

00

HTML5 Canvas

2D Context abrufen:

                    var context = canvas.getContext("2d");
                
Ihr Browser unterstützt kein Canvas.

Sieht ja noch genauso aus...

Hochschule für Technik, Wirtschaft und Kultur Leipzig [FH]
Philipp Zins, Webtechnologien

00

HTML5 Canvas

Primitive Zeichenoperationen

Rechteck zeichnen:

                    context.fillStyle = "#FF0000";  // red
                    context.fillRect(65, 20, 70, 50);  // (x, y, width, height)
                
Ihr Browser unterstützt kein Canvas.

(Canvas anklicken, um das Zeichnen auszulösen.)

Hochschule für Technik, Wirtschaft und Kultur Leipzig [FH]
Philipp Zins, Webtechnologien

00

HTML5 Canvas

Kreis zeichnen:

        context.fillStyle = "#FF7700";  // orange
        context.beginPath();    // circle described as path
        context.arc(70, 50, 30, 0, Math.PI * 2, true);  // (x, y, radius, startAngle, endAngle, clockwise)
        context.closePath();    // circle description end
        context.fill(); // fill path with color
                
Ihr Browser unterstützt kein Canvas.

Hochschule für Technik, Wirtschaft und Kultur Leipzig [FH]
Philipp Zins, Webtechnologien

00

HTML5 Canvas

Linien zeichnen:

                    context.beginPath();   // create path
                    context.lineWidth = 2;  // line width
                    context.moveTo(150, 100); // start (x, y)
                    context.lineTo(120, 105);    // next (x, y)
                    context.lineTo(100, 90); // next (x, y)
                    context.stroke();   // end
                
Ihr Browser unterstützt kein Canvas.

Hochschule für Technik, Wirtschaft und Kultur Leipzig [FH]
Philipp Zins, Webtechnologien

00

HTML5 Canvas

Verlauf zeichnen:

                    var gradient = context.createLinearGradient(110, 60, 130, 70); // (x1, y1, x2, y2)
                    gradient.addColorStop(0, "#000000");    // (offset, color)
                    gradient.addColorStop(1, "#FFFFFF");    // (offset, color)
                    context.fillStyle = gradient;   // set gradient
                    context.fillRect(110, 60, 20, 20);  // draw rectangle
                
Ihr Browser unterstützt kein Canvas.

Hochschule für Technik, Wirtschaft und Kultur Leipzig [FH]
Philipp Zins, Webtechnologien

00

HTML5 Canvas

Text zeichnen:

                    context.font = "bold 30px sans-serif";  // font style
                    context.fillText("Siebzehn!", 17, 107);  // (string, x, y)
                
Ihr Browser unterstützt kein Canvas.

Hochschule für Technik, Wirtschaft und Kultur Leipzig [FH]
Philipp Zins, Webtechnologien

00

HTML5 Canvas

Bilder/Videos/andere Canvas-Elemente auf ein Canvas zeichnen:

                    var image = document.getElementById("testImage");   // reference to image
                    context.drawImage(image, 250, 40, 100, 100);   // (img, x, y, width, height)
                
lolface

Hinweis: Das Bild muss vorher vollständig geladen sein.

Ihr Browser unterstützt kein Canvas.

Hochschule für Technik, Wirtschaft und Kultur Leipzig [FH]
Philipp Zins, Webtechnologien

00

HTML5 Canvas

Und noch viel mehr!

  • verschiedene Linien- und Füllstile
  • radiale Verläufe und Muster
  • Schlagschatten
  • Ebenenstile
  • Schnittmengen
  • Bezierkurven

Zu viele um alle zu erklären. Übersicht: Canvas Cheat Sheet

Hochschule für Technik, Wirtschaft und Kultur Leipzig [FH]
Philipp Zins, Webtechnologien

00

HTML5 Canvas

Animationen

  • Canvas in jedem Frame neu bezeichnen
  • gut geeignet für Bilder, Videos oder andere Canvas Elemente

Hochschule für Technik, Wirtschaft und Kultur Leipzig [FH]
Philipp Zins, Webtechnologien

00

HTML5 Canvas

requestAnimationFrame:

                    function animate() {
                        // place drawing operations here
                        window.requestAnimationFrame(animate, canvas);
                    }
                    window.requestAnimationFrame(animate, canvas);
                
Ihr Browser unterstützt kein Canvas.

Die Funktion "animate" wird ~60x pro Sekunde aufgerufen. Ausführliche Erklärung.

Hochschule für Technik, Wirtschaft und Kultur Leipzig [FH]
Philipp Zins, Webtechnologien

00

HTML5 Canvas

Teile von Bildern zeichnen:

                    var image = document.getElementById("marioSprite");
                    context.drawImage(image, 0, 0, 55, 72,  // (img, source-x, source-y, source-width, source-height,
                        120, 60, 55, 72);   // x, y, width, height)
                
Mario Sprite Sheet Ihr Browser unterstützt kein Canvas.

Hochschule für Technik, Wirtschaft und Kultur Leipzig [FH]
Philipp Zins, Webtechnologien

00

HTML5 Canvas

Sprite Sheet Animationen:

                    var i = 0;  // current sprite tile
                    var j = 0;  // image counter
                    function animate() {
                        context.drawImage(image, 55 * i, 0, 55, 72, 120, 60, 55, 72);
                        j++; if(j > 10) { i++; j = 0; } // after 10 frames switch to next tile
                        if (i >= 5) i = 0;
                        window.requestAnimFrame(animate, canvas);
                    }
                    window.requestAnimFrame(animate, canvas);
                
Mario Sprite Sheet Ihr Browser unterstützt kein Canvas.

Hochschule für Technik, Wirtschaft und Kultur Leipzig [FH]
Philipp Zins, Webtechnologien

00

HTML5 Canvas

Was ist faul?

questionmark

Hochschule für Technik, Wirtschaft und Kultur Leipzig [FH]
Philipp Zins, Webtechnologien

00

HTML5 Canvas

Sprite Sheet Animationen Fixed:

                    var i = 0; var j = 0;
                    function animate() {
                        context.clearRect(0, 0, canvas.width, canvas.height);
                        context.drawImage(image, 55 * i, 0, 55, 72, 120, 60, 55, 72);
                        j++; if(j > 10) { i++; j = 0; } // after 10 frames switch to next tile
                        if (i >= 5) i = 0;
                        window.requestAnimFrame(animate, canvas);
                    }
                    window.requestAnimFrame(animate, canvas);
                
Mario Sprite Sheet Ihr Browser unterstützt kein Canvas.

Hochschule für Technik, Wirtschaft und Kultur Leipzig [FH]
Philipp Zins, Webtechnologien

00

HTML5 Canvas

Sprite Sheet Animation auf eigenem unsichtbaren Canvas:

                    var x = 0;
                    function animate() {
                        context.clearRect(0, 0, canvas.width, canvas.height);
                        // spriteSheetCanvas like last example
                        context.drawImage(spriteSheetCanvas, x, 40, 55, 72);
                        x += 1;
                        window.requestAnimFrame(animate, canvas);
                    }
                    window.requestAnimFrame(animate, canvas);
                
Ihr Browser unterstützt kein Canvas.

Hochschule für Technik, Wirtschaft und Kultur Leipzig [FH]
Philipp Zins, Webtechnologien

00

HTML5 Canvas

Und noch mehr Möglichkeiten!

  • Transformationen: translate(x, y), scale(xScale, yScale), rotate(angle), setTransform(a,b,c,d,e,f)
  • Pixelmanipulationen: getImageData(left, top, width, height), putImageData(data, dx, dy)

Die komplette Spezifikation: Canvas und 2D Context

Hochschule für Technik, Wirtschaft und Kultur Leipzig [FH]
Philipp Zins, Webtechnologien

00

HTML5 Canvas

Demos

Hochschule für Technik, Wirtschaft und Kultur Leipzig [FH]
Philipp Zins, Webtechnologien

00

HTML5 Canvas

Noch Fragen?

http://www.senäh.de/