201116Feb

Gury: Weitere Bibliothek für Canvas-Effekte

Projekte wie Easel JS oder die MooTools Canvas Library verstehen sich als zusätzliche JavaScript-Bibliotheken, durch die sich die Verwendung des HTML5-Canvas-Elements vereinfachen lässt. So stehen verschiedene Funktionen zur Verfügung, mit denen sich noch effektiver Animationen entwickeln lassen.
Ein weiteres Framework dieser Reihe stellt so auch Gury dar, das sich derzeit in der Alpha-Phase befindet und verschiedene Möglichkeiten für die Animation des Canvas-Elements bietet.

Gury - HTML5 canvas utility library

Durch die Verwendung der Bibliothek entsteht also JavaScript-Code, in dem bestimmte Befehle der Canvas-API verwendet werden. Ein Beispiel, das direkt von der Seite des Projekts übernommen wurde:

  • $g().size(256, 256).background("#363").add({
  • size: 128,
  • theta: 0,
  • dTheta: Math.PI / 120,
  •  
  • update: function() {
  • this.theta += this.dTheta;
  • },
  •  
  • draw: function(ctx, canvas) {
  • ctx.fillStyle = "#ada";
  • ctx.save();
  • ctx.translate(canvas.width / 2, canvas.height / 2);
  • ctx.rotate(this.theta);
  • ctx.fillRect(-this.size/2, -this.size/2, this.size, this.size);
  • ctx.restore();
  • }
  • })
  • .place("body").play(33);

Mit diesem Aufruf werden also zwei Quadrate erzeugt, wobei ein Quadrat in einem Intervall von 33 Millisekunden rotiert wird. In Gury werden also mehrere Funktionen eines üblichen JavaScript-Frameworks vereint und um Canvas-Optionen erweitert. Somit lassen sich schneller HTML5-Animationen umsetzen und zudem wurde die Bibliothek mit rund 10 KB kompakt gehalten.

RSS-Feed abonnieren