• IT-Karriere:
  • Services:

Canto.js

Vereinfachtes API für HTML5-Canvas

Der Entwickler und Buchautor David Flanagan hat mit Canto.js eine Javascript-Bibliothek veröffentlicht, die den Umgang mit dem Canvas-Element aus HTML5 vereinfacht, wenn es um 2D-Zeichnungen geht.

Artikel veröffentlicht am ,

Canto.js definiert eine einzelne Factory-Funktion namens canto(). Wird dieser ein Canvas-Element oder die ID eines Canvas-Elements übergeben, gibt die Funktion ein Canto-Objekt zurück. Dabei handelt es sich um einen Zeichen-Kontext, wie ihn auch die Funktion getContext('2d') zurückgibt.

Stellenmarkt
  1. DLR Deutsches Zentrum für Luft- und Raumfahrt e.V., Oberpfaffenhofen bei München
  2. IFS Deutschland GmbH & Co. KG, Erlangen, Stuttgart, Neuss

Der Vorteil: Das Canto-Objekt implementiert ein vereinfachtes 2D-Zeichen-API, funktioniert ansonsten aber wie gehabt. So soll sich Canto leicht in bestehenden Code integrieren lassen.

Da alle Canto-Methoden, die keine expliziten Rückgabewerte haben, das Canto-Objekt zurückgeben, lassen sich die Funktionen des Canto-APIs leicht verketten. Das kennt man beispielsweise von jQuery. Der Aufruf "canto("canvas_id").moveTo(100,100).lineTo(200,200,100,200).closePath().stroke();" zeichnet beispielsweise ein Dreieck, wobei die Funktion lineTo() vier Argumente aufnimmt, so dass mit einem Aufruf zwei Linien gezeichnet werden können.

Einigen Funktionen, darunter stroke(), drawImage() und fillText(), können zusätzliche Grafikattribute wie Farbe und die Breite der zu zeichnenden Linie mitgegeben werden: "canto("canvas_id").moveTo(100,100).lineTo(200,200,100,200).closePath().stroke({lineWidth: 15, strokeStyle: "red"});"

Flanagan, der einige Bücher zu Java und Javascript für O'Reilly geschrieben hat, hat Canto.js unter der MIT-Lizenz als Open Source freigegeben und den Code unter code.google.com veröffentlicht.

Bitte aktivieren Sie Javascript.
Oder nutzen Sie das Golem-pur-Angebot
und lesen Golem.de
  • ohne Werbung
  • mit ausgeschaltetem Javascript
  • mit RSS-Volltext-Feed


Anzeige
Top-Angebote
  1. 86,80€ inkl. Versand mit Gutschein: NBBBW3KINGSTON
  2. (u. a. ASUS ROG Strix XG43VQ für 799€, ASUS VG255H für 139,90€ und Thermaltake View 21...
  3. (Bis zu 40 Prozent auf ausgewählte Notebooks, Monitore, PCs, Hardware, Smartphones, Zubehör und...
  4. (u. a. Samsung Galaxy Watch Active 2 Under Armour Edition 44 mm Schwarz für 179,34€ und 40 mm...

NeoTiger 29. Jul 2010

Du wirst lachen, aber das ist in Canto schon drin: // Absolute lineto function L...

Honk 29. Jul 2010

Schonmal ein guter Ansatz. Das werde ich mal testen.


Folgen Sie uns
       


    •  /