Rough.js ustvarja ročno izdelano grafiko s platnom in SVG-jem

Neverjetno je videti, kako daleč je prišel splet dinamični elementi kot naprimer SVG v brskalniku. Lahko načrtujete vse od animacije po meri do Igre HTML5 s pravimi knjižnicami.

Ena od najnovejših knjižnic, ki so vredne testiranja, je Rough.js. Je skripta za ustvarjanje brezplačnih grafov trenutno v beta fazi dela na elementih platna in SVG.

Ustvarite lahko ikone po meri, stolpčne grafe, skoraj vse, kar želite v kodi. In končni rezultat prevzame čudovit, ročno potegnjen občutek.

Od tega pisanja je Rough.js še vedno v0.1 beta, tako da morda ni pripravljen za spletno stran v živo. Toda to je dokaz spletni standardi hitro napredujejo in vstopamo v starost, ko je to mogoče.

Vzemite na primer to napredek ustvarjeno z Rough.js. Če kliknete “Začni” gumb boste opazili zažene animacijo po meri to resnično izgleda ročno. Uporablja Vrstice SVG z vnaprej določenimi vzorci ustvariti nenavaden učinek, ki izgleda resnično naraven.

Na glavni strani GitHub boste našli seznam razdelkov veliko primerov Rough.js v akciji.

Vse to prihajajo z vzorci kode in mora biti precej enostavno predelati za katero koli spletno stran. Vse, kar potrebujete, je skriptna datoteka Rough.js in nekaj potrpljenja, da bi se spravili v JavaScript.

Tukaj je a odrezek vzorca prikazati, kako ustvarite pravokotnik v kodi:

 var rough = novo RoughCanvas (document.getElementById ('myCanvas'), 400, 200); rough.rectangle (10, 10, 200, 200); // x, y, širina, višina 

Precej preprosto, ko razumete kodo, vendar verjetno ni najbolj intuitiven skript za začetnike.

Če želite več odrezkov kode in vzorčnih predstavitev Oglejte si domačo stran Rough.js. To je idealen kraj za začetek učenja in iskanje odrezkov kode, ki jih lahko predelate.

Tudi, če imate vprašanja ali predloge za dodatne funkcije, lahko sporočite ustvarjalcu Rough.js na Twitterju @preetster.