nl.hideout-lastation.com
Paradijs Voor Ontwerpers En Ontwikkelaars


Rough.js maakt handgetekende afbeeldingen met canvas en SVG

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

Een van de nieuwste bibliotheken die het testen waard is, is Rough.js . Het is een gratis script voor het genereren van afbeeldingen dat zich momenteel in de bèta bevindt en dat werkt op canvas- en SVG-elementen .

Je kunt aangepaste pictogrammen, staafdiagrammen maken, vrijwel alles wat je wilt, alles in code. En het uiteindelijke resultaat krijgt een prachtig handgetekend gevoel .

Vanaf dit moment is Rough.js nog steeds in v0.1 beta, dus het is misschien niet klaar voor een live productiewebsite . Maar het is een bewijs dat de webstandaarden snel vorderen en we een tijdperk ingaan waarin dit soort dingen mogelijk zijn.

Neem bijvoorbeeld deze voortgangsbalk gegenereerd door Rough.js. Als u op de knop "Start" klikt, ziet u een aangepaste animatie die er echt handgetekend uitziet . Het gebruikt SVG-lijnen met vooraf gedefinieerde patronen om een ​​wankel effect te creëren dat er echt natuurlijk uitziet.

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

Al deze worden geleverd met codevoorbeelden en moeten vrij gemakkelijk te herwerken zijn voor elke website . Het enige dat je nodig hebt, is het Rough.js-scriptbestand en wat geduld om met JavaScript te knoeien.

Hier is een voorbeeldfragment waarin wordt gedemonstreerd hoe een rechthoek in code kan worden gemaakt :

 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 dan 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.

40 prachtige minimalistische bureaublad achtergronden

40 prachtige minimalistische bureaublad achtergronden

Er zijn miljoenen mensen over de hele wereld die leven volgens het fenomeen van het minimalisme. Van voedsel en kleding tot relaties en andere levenskeuzes, minimalisten beoefenen 'minder is meer' ideologie in elk aspect van hun levensstijl .Als je een fan bent van minimalisme, dan is deze showcase van prachtige minimalistische bureaubladachtergronden iets voor jou

(Technische en ontwerptips)

Leer Adobe XD gratis met deze webgids

Leer Adobe XD gratis met deze webgids

Als u van plan bent om de nieuwste UI / UX-software van Adobe te leren kennen, moet u zich ervan bewust zijn dat u een behoorlijk leerproces zult hebben, omdat Adobe XD een erg complexe ontwerptool is. Als je het leerproces echter snel wilt volgen, bekijk dan deze handleiding die is gepubliceerd door XD Guru

(Technische en ontwerptips)