jQuery-Plugin für Canvas

jCanvas – jQuery trifft HTML5 Canvas
Kommentare

In HTML5 lassen sich dank canvas-Element und zugehörigem JavaScript-API Grafiken direkt in eine Website zeichnen. jCanvas, eine jQuery-basierte Library, will es jetzt noch einfacher machen, Canvas-Zeichnungen und interaktive Applikationen zu entwickeln.

Getreu dem Motto „jCanvas is a jQuery plugin that makes the HTML5 canvas easy to work with“ legt sich jCanvas um das HTML5-Canvas-API und fügt ihm neue Features und Fähigkeiten hinzu. Dazu zählen beispielsweise Layer, Events, Drag and Drop, Animationen und vieles mehr. Das Ergebnis ist ein flexibles API in einer jQuery-esquen Syntax, das HTML5 Canvas mit etwas mehr Pep versieht.

Features von jCanvas

Bei jCanvas handelt es sich um ein flexibles API zum Zeichnen von einfachen und komplexen Formen, das sowohl auf Desktop als auch Mobile läuft. jCanvas steht unter MIT-Lizenz Open Source zur Verfügung und beansprucht gezippt nur 11,8 KB Speicher.

Stellen Sie Ihre Fragen zu diesen oder anderen Themen unseren entwickler.de-Lesern oder beantworten Sie Fragen der anderen Leser.

Mit jCanvas sind dieselben Funktionen wie die eines nativen Canvas-APIs nutzbar. Umgekehrt ist es auch möglich, native HTML5-Canvas-API-Methoden mit jCanvas zu verwenden: Dafür eignet sich die draw()-Methode am besten. Zudem lässt sich die Funktionsweise von jCanvas erweitern, indem über das extend()-Feature neue Methoden und Properties hinzugefügt werden.

So here again we have an example of jQuery making some web code a lot easier to use.

Die meisten jCanvas-Methoden akzeptieren verschiedene Eigenschaftswert-Paare, die in beliebiger Reihenfolge aufgeführt sein können. Marie Antonietta Perna hat in einem lesenswerten Beitrag verschiedene mögliche Formen mit Code-Beispielen zusammengestellt, anhand derer die Arbeit mit jCanvas vereinfacht wird. So lässt sich zum Beispiel auch ein lächelndes Gesicht ganz leicht mit jCanvas erstellen:

See the Pen jCanvas example: Smiling Face by SitePoint (@SitePoint) on CodePen.


Zudem gibt es auch die Möglichkeit, Linien, Text oder Bilder zu zeichnen – nötig dafür sind die drawLine()-, drawText()– bzw. drawImage()-Methode. Auch Canvas-Layer sind dank des Layer-APIs kein Problem. jCanvas bietet noch viel mehr Gestaltungsmöglichkeiten: In der Dokumentation findet sich ein Überblick; in der Sandbox können Beispiele getestet werden.

Um jCanvas ins eigene Projekt einzubinden, benötigt man das Skript, das auf GitHub zum Download zur Verfügung steht. Damit das Plugin funktioniert, muss jQuery in das entsprechende Projekt eingebunden sein.

Name jCanvas
Hersteller Caleb Evans
Projektwebsite http://projects.calebevans.me/jcanvas/
GitHub https://github.com/caleb531/jcanvas
API Summit 2017

JavaScript Testing in der Praxis

mit Dominik Ehrenberg (crosscan) & Sebastian Springer (MaibornWolff)

Node.js Quickstart

mit Sebastian Springer (MaibornWolff)

International JavaScript Conference 2018

GraphQL – where did all my endpoints go?

mit Chris Noring (McKinsey)

Make Node.js API’s great with TypeScript

mit Dmytro Zharkov (Zalando)

 

Aufmacherbild: paint brushes in jar and blank canvas over blackboard background von Shutterstock / Urheberrecht: tomertu

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -