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.

Schreibe einen Kommentar

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