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. Produktmanager / Produktverantwortlicher Online-Dienste (w/m/d)
    Dataport, verschiedene Standorte
  2. First-Level-Supporter (m/w/d)
    PHYTEC Messtechnik GmbH, Mainz
Detailsuche

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"});"

Golem Karrierewelt
  1. Automatisierung (RPA) mit Python: virtueller Zwei-Tage-Workshop
    03./04.11.2022, Virtuell
  2. Jira für Systemadministratoren: virtueller Zwei-Tage-Workshop
    08./09.09.2022, virtuell
Weitere IT-Trainings

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


Aktuell auf der Startseite von Golem.de
Native ARM-Version ausprobiert
Microsoft Teams für Apple Silicon endlich benutzbar

Die native ARM-Version von Teams für Macs mit Apple Silicon hat es in sich: Neben deutlichen Performance-Gewinnen überrascht die Akkulaufzeit.
Ein Bericht von Martin Böckmann und Marc Sauter

Native ARM-Version ausprobiert: Microsoft Teams für Apple Silicon endlich benutzbar
Artikel
  1. Microsoft: Bug in Windows 11 und Server 2022 führt zu Datenschäden
    Microsoft
    Bug in Windows 11 und Server 2022 führt zu Datenschäden

    Fast alle Maschinen mit modernen CPUs von AMD und Intel sind von dem Fehler betroffen, wenn sie Daten verschlüsseln - etwa per Bitlocker.

  2. Wegen Twitter-Deal: Elon Musk verkauft Tesla-Aktien im Milliardenwert
    Wegen Twitter-Deal
    Elon Musk verkauft Tesla-Aktien im Milliardenwert

    Der Tesla-CEO bereitet sich auf den "hoffentlich unwahrscheinlichen" Fall vor, dass er Twitter tatsächlich kaufen muss.

  3. Antivirensoftware: Wie das BSI Kaspersky zur Bedrohung erklärte
    Antivirensoftware
    Wie das BSI Kaspersky zur Bedrohung erklärte

    Interne Dokumente des BSI zeigen, wie es zu der Warnung vor Kaspersky kam - inklusive eines Gefallens für GData.
    Von Moritz Tremmel

Du willst dich mit Golem.de beruflich verändern oder weiterbilden?
Zum Stellenmarkt
Zur Akademie
Zum Coaching
  • Schnäppchen, Rabatte und Top-Angebote
    Die besten Deals des Tages
    Daily Deals • Grafikkarten zu Tiefpreisen (Gigabyte RTX 3080 Ti 1.089€, Gigabyte RTX 3080 12GB 859€) • MSI-Sale: Gaming-Laptops/PCs bis -30% • Sharkoon PC-Gehäuse -53% • Philips Hue -46% • Günstig wie nie: Samsung SSD 2TB Heatsink (PS5) 219,99€ • Der beste Gaming-PC für 2.000€ [Werbung]
    •  /