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

Font Dragr – Fonts für den Einsatz im Web einfach ... Der Font Dragr ist eine ziemlich coole Sache, man kann einen beliebigen Font einfach auf eine dafür vorgesehene Fläche mittels Drag&Drop ziehen, u...
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...
8 Online CSS3 Generatoren Frei nach dem Motto: lieber schnell zusammen geklickt, als falsch selbst gemacht, habe ich mal eine Liste von 10 guten CSS3 Online Editoren erstellt. ...
Mozilla veröffentlicht ein HTML5-basiertes Browser... Der Markt der Browserspiele boomt. Mittlerweile erwirtschaften die Marktführer in diesem Bereich Jahres-Umsätze im dreistelligen Millionen-Bereich. ...

Schreibe einen Kommentar