Rough.js gör handritad grafik med kanfas & SVG

Det är fantastiskt att se hur långt webben har kommit med dynamiska element som in-browser SVGs. Du kan designa allt från anpassade animeringar till HTML5-spel med rätt bibliotek.

Ett av de nyaste bibliotek som är värt att testa är Rough.js. Det är en gratis grafikgenereringsskript för närvarande i beta som arbetar på duk och SVG-element.

Du kan bygga anpassade ikoner, stapeldiagram, ganska mycket vad du vill ha allt i kod. Och det slutliga resultatet tar på sig en vacker handritad känsla.

Med detta skrivande är Rough.js fortfarande i v0.1 beta, så det kanske inte är redo för en levande produktionswebbplats. Men det är ett bevis på att webbstandarder fortskrider snabbt och vi går in i en ålder där denna typ av saker är möjligt.

Ta till exempel detta framdriftsfältet genererad genom Rough.js. Om du klickar på “Start” knappen märker du det kör en anpassad animering den där Ser verkligen ut handtraktat. Det använder SVG-linjer med fördefinierade mönster för att skapa en wobbly effekt som ser riktigt naturlig ut.

På huvudgithubsidan hittar du en avsnittlista många exempel på Rough.js i aktion.

Alla dessa komma med kodprover och borde vara ganska lätt att omarbeta för vilken webbplats som helst. Allt du behöver är Rough.js-skriptfilen och lite tålamod att röra med JavaScript.

Här är en provbit visar hur man ska skapa en rektangel i kod:

 var grov = ny RoughCanvas (document.getElementById ('myCanvas'), 400, 200); grov.rektangel (10, 10, 200, 200); // x, y, bredd, höjd 

Ganska enkelt när du förstår koden men förmodligen inte det mest intuitiva manuskriptet för nybörjare.

Om du vill ha fler kodrapporter och provdemonstrationer kolla in Rough.js hemsida. Det är den perfekta platsen att börja lära sig och hitta kodutdrag som du kan omarbeta.

Om du har frågor eller förslag till ytterligare funktioner kan du också meddela Rough.js-skaparen på Twitter @preetster.