201328Jan

Canvas Query: HTML5-Canvas im jQuery-Stil verwenden

Die Beliebtheit von jQuery dürfte mittlerweile allgemein bekannt sein. Das Framework fällt durch seinen "$"-Selektor auf und bietet wie auch andere JavaScript-Frameworks die Möglichkeit, Methoden aneinanderzureihen (Chaining). Diesem Vorbild folgt beispielsweise schon die Three.js-Extension tQuery, mit der sich dreidimensionale Three.js-Szenen noch schneller zusammensetzen lassen.
Ähnlich arbeitet auch die Bibliothek Canvas Query: Dabei handelt es sich um einen Wrapper für das HTML5-Canvas-Element, der eine vereinfachte Schreibweise und diverse Funktionen bereitstellt.

Canvas Query - HTML5-Canvas im jQuery-Stil verwenden

So lässt sich ein Canvas-Element in etwa so erzeugen:

  • cq(640, 480)
  • .fillStyle("#ff0000")
  • .fillRect(0, 0, 640, 480)
  • .drawImage(image, 0, 0)
  • .blur();

Im Beispiel wird ein Bild-Element vorausgesetzt. Neben den nativen Gettern und Settern des Canvas-Elements, die in Canvas Query übernommen wurden, bietet die Bibliothek erweiterte Effekte wie Weichzeichner, Masken oder Konvertierungen. Ein Beispiel für die Funktion "matchPalette" findet sich hier. Den Quelltext gibt es wieder bei GitHub.

RSS-Feed abonnieren Bookmark bei Del.icio.us Bookmark bei Mister Wong