Роугх.јс прави Ханд-Дравн Грапхицс са Цанвас & СВГ

Невероватно је видети колико је далеко дошао веб динамички елементи као такав СВГ у претраживачу. Можете дизајнирати све од цустом аниматионс до ХТМЛ5 игре са правим библиотекама.

Једна од најновијих библиотека вредна тестирања је Роугх.јс. То је бесплатну генерацију графике скрипту тренутно у бета верзији ради на платну и СВГ елементима.

Можете креирати прилагођене иконе, бар графиконе, скоро све што желите у коду. И, коначни резултат преузима предиван руком извучени осећај.

Од овог писања, Роугх.јс је још увијек у в0.1 бета, тако да можда није спреман за веб сајт уживо. Али то је доказ веб стандарди брзо напредују и улазимо у доба у којем је таква врста ствари могућа.

Узмите за пример ово прогрес бар генерисана преко Роугх.јс. Ако кликнете на “Почетак” то ћете приметити покреће прилагођену анимацију то заиста изгледа руком. Користи СВГ линије са унапред дефинисаним обрасцима да створи климав ефекат који изгледа истински природно.

На главној ГитХуб страници, наћи ћете листу секција много примера Роугх.јс у акцији.

Све ово долазе са узорцима кода и требало би да буде прилично лако прерадити за било који веб сајт. Све што вам је потребно је Роугх.јс скрипт фајл и мало стрпљења да се упетљате у ЈаваСцрипт.

Ево једног исјечак узорка демонстрира како направите правоугаоник у коду:

 вар роугх = нев РоугхЦанвас (доцумент.гетЕлементБиИд ('миЦанвас'), 400, 200); роугх.рецтангле (10, 10, 200, 200); // к, и, ширина, висина 

Прилично једноставна када схватите код, али вероватно не најинтуитивнији скрипт за почетнике.

Ако желите више исјечака кода и узорака демоа погледајте почетну страницу Роугх.јс. То је савршено мјесто за почетак учења и проналажење исјечака кода које можете прерадити.

Такође, ако имате питања или сугестије за додатне карактеристике, можете послати поруку креатору Роугх.јс на Твиттеру @преетстер.