Abo
  • 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. DATAGROUP Köln GmbH, Köln
  2. ETAS, Stuttgart

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.



Anzeige
Top-Angebote
  1. 219€ (Vergleichspreis 251€)
  2. 19,89€ inkl. Versand (Vergleichspreis ca. 30€)
  3. (nur für Prime-Mitglieder)
  4. 77€ (Vergleichspreis 97€)

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
       


Volocopter auf der Cebit 2018 angesehen

Im autonomen Volocopter haben zwei Personen mit zusammen höchstens 160 Kilogramm Platz - wir haben uns auf der Cebit 2018 trotzdem reingesetzt.

Volocopter auf der Cebit 2018 angesehen Video aufrufen
Hasskommentare: Wie würde es im Netz aussehen, wenn es uns nicht gäbe?
Hasskommentare
"Wie würde es im Netz aussehen, wenn es uns nicht gäbe?"

Hannes Ley hat vor rund anderthalb Jahren die Online-Initiative #ichbinhier gegründet. Die Facebook-Gruppe schreibt Erwiderungen auf Hasskommentare und hat mittlerweile knapp 40.000 Mitglieder. Im Interview mit Golem.de erklärt Ley, wie er die Idee aus dem Netz in die echte Welt bringen will.
Ein Interview von Jennifer Fraczek

  1. Nutzungsrechte Einbetten von Fotos muss nicht verhindert werden
  2. Bundesnetzagentur UKW-Abschaltung abgewendet
  3. Drupalgeddon 2 115.000 Webseiten mit Drupallücken übernommen

KI in der Medizin: Keine Angst vor Dr. Future
KI in der Medizin
Keine Angst vor Dr. Future

Mit Hilfe künstlicher Intelligenz können schwer erkennbare Krankheiten früher diagnostiziert und behandelt werden, doch bei Patienten löst die Technik oft Unbehagen aus. Und das ist nicht das einzige Problem.
Ein Bericht von Tim Kröplin

  1. Medizintechnik Künstliche Intelligenz erschnüffelt Krankheiten
  2. Dota 2 128.000 CPU-Kerne schlagen fünf menschliche Helden
  3. KI-Bundesverband Deutschland soll mehr für KI-Forschung tun

Battlefield 5 Closed Alpha angespielt: Schneller sterben, länger tot
Battlefield 5 Closed Alpha angespielt
Schneller sterben, länger tot

Das neue Battlefield bekommt ein bisschen was von Fortnite und wird allgemein realistischer und dynamischer. Wir konnten in der Closed Alpha Eindrücke sammeln und erklären die Änderungen.
Von Michael Wieczorek

  1. Battlefield 5 Mehr Reaktionsmöglichkeiten statt schwächerer Munition
  2. Battlefield 5 Closed Alpha startet mit neuen Systemanforderungen
  3. Battlefield 5 Schatzkisten und Systemanforderungen

    •  /