de.hideout-lastation.com
Paradies Für Designer Und Entwickler


Rough.js macht handgezeichnete Grafiken mit Canvas & SVG

Es ist erstaunlich zu sehen, wie weit das Web mit dynamischen Elementen wie In-Browser-SVGs gekommen ist . Sie können alles von benutzerdefinierten Animationen zu HTML5-Spielen mit den richtigen Bibliotheken gestalten.

Eine der neuesten Bibliotheken, die es zu testen lohnt, ist Rough.js . Es ist ein kostenloses Skript zur Grafikgenerierung, das sich derzeit in der Betaversion befindet und auf Canvas- und SVG-Elementen funktioniert .

Sie können benutzerdefinierte Symbole, Balkendiagramme, so ziemlich alles, was Sie wollen, im Code erstellen. Und das Endergebnis bekommt ein wunderschönes handgezeichnetes Gefühl .

Zum jetzigen Zeitpunkt befindet sich Rough.js noch in der Betaversion v0.1 und ist daher möglicherweise nicht für eine Live-Produktions-Website bereit . Aber es ist ein Beweis dafür, dass Webstandards schnell voranschreiten und wir in ein Zeitalter eintreten, in dem solche Dinge möglich sind.

Nehmen Sie zum Beispiel diesen Fortschrittsbalken, der durch Rough.js generiert wurde. Wenn Sie auf die Schaltfläche "Start" klicken, werden Sie feststellen, dass eine benutzerdefinierte Animation ausgeführt wird, die wirklich von Hand gezeichnet ist . Es verwendet SVG-Linien mit vordefinierten Mustern, um einen wackeligen Effekt zu erzeugen, der wirklich natürlich aussieht.

Auf der Hauptseite von GitHub finden Sie viele Beispiele für Rough.js in Aktion .

Alle diese werden mit Codebeispielen geliefert und sollten für jede Website leicht zu überarbeiten sein . Alles, was Sie brauchen, ist die Rough.js-Skriptdatei und etwas Geduld, um sich mit dem JavaScript zu befassen.

Hier ist ein Beispielausschnitt, der zeigt, wie ein Rechteck im Code erstellt wird :

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

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

Wenn Sie mehr Code-Snippets und Beispiel-Demos möchten , besuchen Sie die Rough.js-Homepage . Es ist der perfekte Ort, um zu lernen und Code-Snippets zu finden, die Sie nacharbeiten können.

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

18 essentielle Plugins, um mehr aus großartigem Text herauszuholen

18 essentielle Plugins, um mehr aus großartigem Text herauszuholen

Obwohl SublimeText mit einer Reihe toller Funktionen ausgestattet ist, die uns bei der Arbeit als Webentwickler helfen, wird es wie bei jedem anderen Tool immer Raum für Verbesserungen geben . Dies ist, wenn Plugins wirklich nützlich sein können (und wir sind große Fans von Plugins).Bevor wir fortfahren, möchten Sie vielleicht unsere früheren Beiträge zu SublimeText lesen, um zu sehen, was es in seinem nativen Zustand tun kann:Einfache Farbauswahl im erhabenen TextVerwalten Sie Notizen und Listen mit großartigem TextWie man Sass mit erhabenem Text kompiliertSo aktualisieren Sie Änderungen im Br

(Tech- und Design-Tipps)

20 Websites zum kostenlosen Anhören und Teilen von Musik

20 Websites zum kostenlosen Anhören und Teilen von Musik

Musik hören ist zu einem festen Bestandteil unseres Lebens geworden . Wir hören die Musik während des Pendelns, täglichen Läufen, wenn wir uns entspannen wollen oder wenn wir nur mit den neuesten Stücken unserer Idole mithalten wollen. In diesen Tagen haben wir eine Vielzahl von Möglichkeiten, Musik online zu hören, und wenn Sie etwas gutes suchen, um Ihre Lieblingsmusik zu hören, dann ist dies der Beitrag, den Sie lesen sollten.Hier fin

(Tech- und Design-Tipps)