Rough.js maakt handgetekende afbeeldingen met canvas en SVG

Het is geweldig om te zien hoe ver het web is gekomen dynamische elementen zoals SVG's in de browser. Je kunt alles van ontwerpen aangepaste animaties naar HTML5-spellen met de juiste bibliotheken.

Een van de nieuwste bibliotheken die het testen waard is Rough.js. Het is een gratis grafische generatie script momenteel in bèta die werkt op canvas en SVG-elementen.

U kunt aangepaste pictogrammen, staafdiagrammen maken, vrijwel alles wat u wilt, alles in code. En, het eindresultaat krijgt een prachtig handgetekend gevoel.

Vanaf dit moment is Rough.js nog steeds in v0.1 beta, dus het misschien niet klaar voor een live productie-website. Maar het is een bewijs dat webstandaarden vorderen snel en we gaan een tijdperk binnen waar dit soort dingen mogelijk zijn.

Neem dit bijvoorbeeld voortgangsbalk gegenereerd via Rough.js. Als u op klikt “Begin” knop zal je het merken voert een aangepaste animatie uit dat ziet er echt handgetekend uit. Het gebruikt SVG-regels met vooraf gedefinieerde patronen om een ​​wankel effect te creëren dat er echt natuurlijk uitziet.

Op de hoofdpagina van GitHub vindt u een lijst met secties veel voorbeelden van Rough.js in actie.

Al deze kom met codevoorbeelden en zou moeten zijn vrij gemakkelijk om voor om het even welke website opnieuw te bewerken. Het enige dat je nodig hebt, is het Rough.js-scriptbestand en wat geduld om met JavaScript te knoeien.

Hier is een voorbeeldfragment demonstreren hoe maak een rechthoek in code:

 var rough = new RoughCanvas (document.getElementById ('myCanvas'), 400, 200); rough.rectangle (10, 10, 200, 200); // x, y, width, height 

Vrij eenvoudig als je de code begrijpt, maar waarschijnlijk niet het meest intuïtieve script voor beginners.

Als u meer codefragmenten en voorbeelddemo's wilt Bekijk de startpagina van Rough.js. Het is de perfecte plek om te beginnen met leren en om codefragmenten te vinden die je opnieuw kunt bewerken.

Als je vragen of suggesties hebt voor extra functies, kun je de maker van Rough.js ook een bericht sturen op Twitter @preetster.