Rough.js padara roku zīmētu grafiku ar Canvas & SVG

Tas ir pārsteidzošs, lai redzētu, cik lielā mērā tīmeklis ir nācis dinamiskie elementi piemēram, pārlūkprogrammas SVG. Jūs varat izveidot visu no pielāgotas animācijas uz HTML5 spēles ar pareizajām bibliotēkām.

Viena no jaunākajām bibliotēkām, kas ir vērts pārbaudīt, ir Rough.js. Tas ir bezmaksas grafikas paaudzes skripts pašlaik beta versijā darbojas uz audekla un SVG elementiem.

Jūs varat izveidot pielāgotas ikonas, joslu diagrammas, diezgan daudz jebko, ko vēlaties visu kodu. Un gala rezultāts aizņem brīnišķīgu roku izjūtu.

Sākot ar šo rakstu, Rough.js joprojām atrodas beta 1. versijā, tā var nebūt gatavs tiešraides ražošanas vietnei. Bet tas ir pierādījums tam Web standarti strauji attīstās un mēs nonākam vecumā, kad šāda veida lietas ir iespējamas.

Veikt, piemēram, šo progresa josla ģenerēts, izmantojot Rough.js. Noklikšķinot uz “Sākt” jūs to pamanīsiet vada pielāgotu animāciju to tiešām izskatās ar roku. Tas izmanto SVG līnijas ar iepriekš definētiem modeļiem radīt viltīgu efektu, kas izskatās patiesi dabisks.

Galvenajā GitHub lapā atradīsiet sadaļas sarakstu daudzi Rough.js piemēri darbībā.

Visi no šiem nāk ar kodu paraugiem un tam jābūt diezgan viegli pārstrādāt jebkurā tīmekļa vietnē. Viss, kas Jums nepieciešams, ir Rough.js skripta fails un dažas pacietības, lai izjauktu JavaScript.

Lūk, a parauga fragments demonstrējot, kā izveidot taisnstūri kodā:

 var rough = jauns RoughCanvas (document.getElementById ('myCanvas'), 400, 200); neapstrādāts.taisnstūris (10, 10, 200, 200); // x, y, platums, augstums 

Diezgan vienkāršs, kad jūs saprotat kodu, bet, iespējams, nav intuitīvākais skripts iesācējiem.

Ja vēlaties vairāk koda fragmentu un paraugu demonstrācijas apskatiet Rough.js mājas lapu. Tā ir lieliska vieta, kur sākt mācīties un atrast koda fragmentus, kurus varat pārstrādāt.

Ja jums ir jautājumi vai ieteikumi par papildu funkcijām, varat ziņot Rough.js veidotājam par čivināt @preetster.