HTML and CSS Reference
In-Depth Information
Zeichenoperationen
destination-out
Der bestehende Inhalt bleibt dort erhalten, wo die neue Form nicht
gezeichnet wird.
source-atop
Die neue Form wird nur dort gezeichnet, wo bestehender Inhalt bereits
vorhanden ist.
destination-atop
Der bestehende Inhalt wird dort erhalten, wo er sich mit der neuen Form
überlappt. Die neue Form wird hinter den bestehenden Inhalt gezeichnet.
lighter
Die überlappenden Bereiche zwischen altem Inhalt und neuer Form
werden heller gezeichnet. Der genaue Farbwert wird durch Addition der
überlappenden Pixelfarbwerte bestimmt.
darker
Die überlappenden Bereiche zwischen altem Inhalt und neuer Form
werden dunkler gezeichnet. Der genaue Farbwert wird durch Subtraktion
der überlappenden Pixelfarbwerte bestimmt.
xor
Überlappende Bereiche werden transparent.
copy
Zeichnet nur die neue Form und löscht den restlichen Inhalt.
2.3.8
Diagramme mit Flot
Sie haben in den letzten Kapiteln die Canvas-API grundlegend kennengelernt. Sicherlich
sind Sie vom Umfang der API erschlagen, obwohl sich damit fast jede zeichnerische
Meisterleistung vollbringen lässt. Allerdings müssen Sie das Rad nicht immer neu erfin-
den. Es gibt bereits zahlreiche JavaScript-Toolkits, die auf der Canvas-API aufsetzen, um
beispielsweise Diagramme zu zeichnen. Während Sie durch die Benutzung einer höhe-
ren API natürlich automatisch an Freiheit verlieren, bietet sich deren Nutzung oftmals
für spezifische Gebrauchsfälle an. Die Zeitersparnis kann enorm sein, da Sie lediglich die
Funktionalität in der erwarteten Form angeben und die API die passenden Canvas-
Operationen ausführt.
Dieser Teil stellt die Flot JavaScript Plotting Libary (
http://code.google.com/p/flot/
) vor,
mit der sich beeindruckende Diagramme in wenigen Zeilen JavaScript-Code erstellen
lassen. Das folgende Beispiel macht dabei nicht nur vom Flot-Toolkit Gebrauch, son-
dern auch von jQuery, einem beliebten JavaScript-Framework. Wir benutzen jQuery als
Basis und spezifischer das jQuery-Flot-Plug-in, um folgendes Diagramm zu zeichnen:
