Rough.js fertigt handgezeichnete Grafiken mit Canvas & SVG

Es ist erstaunlich zu sehen, wie weit das Web gekommen ist dynamische Elemente sowie In-Browser-SVGs. Sie können alles aus gestalten benutzerdefinierte Animationen zu HTML5-Spiele mit den richtigen Bibliotheken.

Eine der neuesten Bibliotheken, die es zu testen gilt, ist Grobjs. Es ist ein kostenloses Skript zur Generierung von Grafiken derzeit in der Beta arbeitet auf Leinwand und SVG-Elementen.

Sie können benutzerdefinierte Symbole, Balkendiagramme und so ziemlich alles, was Sie im Code möchten, erstellen. Und das Endergebnis nimmt ein herrliches von Hand gezeichnetes Gefühl an.

Zum jetzigen Zeitpunkt befindet sich Rough.js noch in der Beta von Version 1.1, also ist möglicherweise nicht bereit für eine Live-Website. Aber das ist ein Beweis dafür Webstandards entwickeln sich schnell und wir treten in ein Zeitalter ein, in dem dieses Zeug möglich ist.

Nehmen Sie zum Beispiel das Fortschrittsanzeige generiert durch Rough.js. Wenn Sie auf klicken “Start” Knopf Sie werden es bemerken führt eine benutzerdefinierte Animation aus Das sieht wirklich von Hand gezeichnet aus. Es verwendet SVG-Zeilen mit vordefinierten Mustern einen wackeligen Effekt erzeugen, der wirklich natürlich wirkt.

Auf der Hauptseite von GitHub finden Sie eine Abschnittsliste viele Beispiele von Rough.js in Aktion.

Alle von denen Komme mit Code-Beispielen und sollte sein ziemlich einfach für jede Website zu überarbeiten. Alles, was Sie brauchen, ist die Rough.js-Skriptdatei und etwas Geduld, um sich mit dem JavaScript zu beschäftigen.

Hier ist ein Beispielausschnitt demonstrieren, wie es geht Erstellen Sie ein Rechteck im Code:

 var rough = new RoughCanvas (document.getElementById ('myCanvas'), 400, 200); grobes Rechteck (10, 10, 200, 200); // x, y, Breite, Höhe 

Ziemlich einfach, wenn Sie den Code verstanden haben, aber wahrscheinlich nicht das intuitivste Skript für Anfänger.

Wenn Sie mehr Code-Schnipsel und Beispieldemos benötigen Besuche die Homepage von Rough.js. Es ist der perfekte Ort zum Lernen und um Code-Schnipsel zu finden, die Sie überarbeiten können.

Wenn Sie Fragen oder Vorschläge für zusätzliche Funktionen haben, können Sie den Ersteller von Rough.js auf Twitter @preetster benachrichtigen.