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

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...
Automatoon – HTML5 Animationen Deluxe Bei meinem ersten Besuch auf Automatoon gab es ein ziemliches auf und ab, angefangen bei "Das kann ja jeder" über "Wie haben sie das bloss gemacht" bi...
Zebra – der Desktop im Browser mit HTML5 Inzwischen sollte es sich bis in die hinterste Ecke herum gesprochen haben das in ein paar Jahren alles in der Cloud passiert, und somit im Browser. I...
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...

Schreibe einen Kommentar

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