Canvas

Mit der Einführung von HTML5 wurde ein neues Element zur Zeichnung von Grafiken mittels JavaScript-API vorgestellt: <canvas>. Die Anwendungsgebiete sind äußerst flexibel, so ist es möglich, mit Canvas Diagramme zu zeichnen, Bilder zu bearbeiten, Animationen zu erstellen oder sogar Videos zu bearbeiten und zu rendern.

Der Support für <canvas> in Mozilla-Anwendungen wurde ab Gecko 1.8 (sprich ab Firefox 1.5) implementiert. Canvas stammt ursprünglich von Apple und wurde für das OS X Dashboard und Safari entwickelt. Der Internet Explorer unterstützt Canvas ab Version 9, wobei es durch ein Skript von Google's Explorer Canvas Projekt auch in früheren Versionen des IE lauffähig ist. Google Chrome und Opera ab Version 9 unterstützen <canvas> ebenfalls problemlos.

Das <canvas> Element wird zudem von WebGL für die hardwarebeschleunigte Darstellung von 3D-Grafiken auf Webseiten eingesetzt.

Beispiel

Dies ist ein einfacher Code-Ausschnitt mit der CanvasRenderingContext2D.fillRect() Methode.

HTML

<canvas id="canvas"></canvas> 

JavaScript

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

ctx.fillStyle = "green";
ctx.fillRect(10, 10, 100, 100);

Bearbeite den untenstehenden Code und sieh live Updates im Canvas:

Referenzen

Die Schnittstellen, die sich auf WebGLRenderingContext beziehen, werden unter WebGL zusammengefasst.

Leitfäden und Anleitungen

Canvas Tutorial

Eine ausführliche Anleitung, die sowohl grundlegende Nutzung als auch fortgeschrittene Funktionen umfasst

Code-Ausschnitte: Canvas

Einige Entwickler-orientierte Code-Ausschnitte, die <canvas> enthalten.

Demo: A basic ray-caster

A demo of ray-tracing animation using canvas.

DOM-Objekte in ein canvas zeichnen

Wie man DOM Inhalt, wie zum Beispiel HTML-Elemente, in ein canvas zeichnet.

Videos mit canvas manipulieren

<video> und <canvas> kombinieren, um Videos in Echtzeit zu manipulieren.

Quellen

Allgemeines

• HTML5 Canvas Deep Dive
• Canvas Handbook

Libraries

• Fabric.js is an open-source canvas library with SVG parsing capabilities.
• Kinetic.js is an open-source canvas library focused on interactivity for desktop and mobile applications.
• Paper.js is an open source vector graphics scripting framework that runs on top of the HTML5 Canvas.
• libCanvas is powerful and lightweight canvas framework.
• Processing.js is a port of the Processing visualization language.
• PlayCanvas is an open source game engine.
• Pixi.js is an open source game engine.
• PlotKit is a charting and graphing library.
• Rekapi is an animation key-framing API for Canvas.
• PhiloGL is a WebGL framework for data visualization, creative coding and game development.
• JavaScript InfoVis Toolkit creates interactive 2D Canvas data visualizations for the Web.

Spezifikationen

Siehe auch

• WebGL