201303Dez

HTML5: Tutorial für verschiedene Canvas-Zeicheneffekte

Browser-Zeichentools wie Sketchpad, Harmony oder Livebrush sind inzwischen bekannt. Die Apps sind unterschiedlich komplex und doch sind viele der eingebauten Zeicheneffekte relativ unkompliziert in der Programmierung. Juriy Zaytsev, besser bekannt ist als "kangax" und Schöpfer des unverzichtbaren "ECMAScript 5 compatibility tables", hat einen interessanten Artikel über die Erstellung verschiedener Zeicheneffekte mit dem HTML5-Canvas-Element veröffentlicht.

Perfection Kills -  Exploring canvas drawing techniques

In dem Beitrag erklärt der ehemalige Prototype.js-Core-Entwickler Stück für Stück Möglichkeiten, um eine virtuelle Zeichenfläche bzw. entsprechende Pinsel mit JavaScript zu erzeugen. Vom punkt-basierten Ansatz über Kantenglättung und Bezier-Kurven bis hin zu multiplen Pinselspitzen dürfte für jeden Geschmack etwas dabei sein. Alle Pinsel könne direkt über die eingebundenen CodePen-Widgets ausprobiert und angepasst werden. Viel Spaß beim Zeichnen!