Patternizer – Pattern mittels HTML5 Canvas erstellen

Man kachelt sich so durchs Leben, vor allem in HTML ;) Seit ich mich erinnern kann gibt es kleine Tools, die einem das Erstellen von Kacheln erleichtern sollen. Darüber hinaus natürlich unzählige Ressourcen, bei denen fertige Kacheln kostenlos heruntergeladen werden können. Nun haben wir aber HTML5 und CSS3, und eigentlich geht damit eine Menge, ohne das es als Grafik vorliegt.

Screenshot von Patternizer

Patternizer ist eine Anwendung in der Cloud die exakt das macht, was bereits vorhandene Tools auch machen: Kacheln bzw. Patterns erstellen. Dabei ist in Wirklichkeit alles anders! ;) Denn man erhält am Ende keine Grafik die man als Hintergrund einbinden muss.

Zunächst einmal kann man eine Kachel durch feine Schieberegler erstellen, das Ergebnis kann man sich direkt live in einem HTML5-Canvas-Element anschauen. Auch ohne kostenpflichtigen Account kann man Designs speichern und mit Freunden teilen. Ansonsten nützt der Patternizer die Fähigkeiten von HTML5 & CSS3 und wird entsprechend eingebunden.

Dies bedeutet, das man ein JavaScript in die betreffende Seite einbindet. Den Code für den Aufruf des Skripts wirft der Patternizer aus, man braucht also keine Zeile selbst programmieren – obwohl man dies natürlich könnte, denn die Webpage ist nichts anderes als ein WYSIWYG-Editor für das kleine JavaScript. Zusätzlich zum JavaScript bindet man noch ein Canvas in die Seite ein, das man mit einer id versieht und dessen Höhe und Breite man bestimmt. Das JavaScript zeichnet dann das festgelegte Muster in den canvas.

Gerade durch das Teilen fertiger Muster wird der Patternizer interessant und stellt für viele Webseiten eine innovative Möglichkeit dar, einfach und schnell einen Hintergrund zu definieren.

Ähnliche Beiträge

Webflow – komplettes CSS3 für Seiten online ... CSS3 Online-Editoren gibt es ja einige in der Cloud. Meistens sind diese für spezialisierte Anwendungen wie zum Beispiel Gradients oder Buttons. Will ...
HTML5 Videos in einfach HTML5 Video und Audio wäre wirklich eine prima Sache, wenn man sich bei dessen Einsatz nicht in eine Konvertierungs-Hölle begeben würde (frei nach Jac...
Icon-Editor in HTML5 – Der x-icon-editor Windows und das Favicon – zwei Welten treffen sich! ;) Die Web-Entwicklung befindet sich so lange in ruhigen Bahnen bis ein Kunde auf die Idee kommt e...
Purple – HTML5 Animationen erstellen Heute kommt mal was ganz neues (und sozusagen eine Premiere) nämlich eine App für MacOS. Seit einigen Monaten fahre ich hier zweigleisig: mein Desktop...

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.