Abo
  • Services:
Anzeige

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.

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.

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.

Anzeige

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.


eye home zur Startseite
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.



Anzeige

Stellenmarkt
  1. Ratbacher GmbH, Görlitz
  2. Deutsche Telekom AG, Bonn
  3. Gebr. Heller Maschinenfabrik GmbH, Nürtingen
  4. Isar Kliniken GmbH, München


Anzeige
Blu-ray-Angebote
  1. 29,99€ (Vorbesteller-Preisgarantie)
  2. 299,99€ (Vorbesteller-Preisgarantie)

Folgen Sie uns
       


  1. Mass Effect

    Bioware erklärt Arbeit an Kampagne von Andromeda für beendet

  2. Kitkat-Werbespot

    Atari verklagt Nestlé wegen angeblichem Breakout-Imitat

  3. Smarter Lautsprecher

    Google Home erhält Bluetooth-Zuspielung und Spotify Free

  4. Reverb

    Smartphone-App aktiviert Alexa auf Zuruf

  5. Bildbearbeitung

    Google-Algorithmus entfernt Wasserzeichen auf Fotos

  6. Ladestationen

    Regierung lehnt Zwangsverkabelung von Tiefgaragen ab

  7. Raspberry Pi

    Raspbian auf Stretch upgedatet

  8. Trotz Förderung

    Breitbandausbau kommt nur schleppend voran

  9. Nvidia

    Keine Volta-basierten Geforces in 2017

  10. Grafikkarte

    Sonnets eGFX Breakaway Box kostet 330 Euro



Haben wir etwas übersehen?

E-Mail an news@golem.de


Anzeige
Orange Pi 2G IoT ausprobiert: Wir bauen uns ein 20-Euro-Smartphone
Orange Pi 2G IoT ausprobiert
Wir bauen uns ein 20-Euro-Smartphone
  1. Odroid HC-1 Bastelrechner besser stapeln im NAS
  2. Bastelrechner Nano Pi im Test Klein, aber nicht unbedingt oho

Mitmachprojekt: HTTPS vermiest uns den Wetterbericht
Mitmachprojekt
HTTPS vermiest uns den Wetterbericht

Breitbandausbau auf Helgoland: Deutschlands Hochseefelsen bekommt nur Vectoring
Breitbandausbau auf Helgoland
Deutschlands Hochseefelsen bekommt nur Vectoring
  1. Provider Dreamhost will keine Daten von Trump-Gegnern herausgeben
  2. Home Sharing Airbnb wehrt sich gegen Vorwürfe zu Großanbietern
  3. Illegale Waffen Migrantenschreck gibt es wieder - jetzt als Betrug

  1. Re: 10-50MW

    Sarkastius | 02:50

  2. Re: Standard-Nutzername lautet pi

    Teebecher | 00:42

  3. Re: Danke Electronic Arts...

    Gokux | 00:05

  4. Re: MegaWatt

    ChMu | 20.08. 23:44

  5. Re: Die Präposition "in" vor einer Jahreszahl ist...

    shertz | 20.08. 23:32


  1. 13:33

  2. 13:01

  3. 12:32

  4. 11:50

  5. 14:38

  6. 12:42

  7. 11:59

  8. 11:21


  1. Themen
  2. A
  3. B
  4. C
  5. D
  6. E
  7. F
  8. G
  9. H
  10. I
  11. J
  12. K
  13. L
  14. M
  15. N
  16. O
  17. P
  18. Q
  19. R
  20. S
  21. T
  22. U
  23. V
  24. W
  25. X
  26. Y
  27. Z
  28. #
 
    •  / 
    Zum Artikel