Rapid și ușor de manipulat elementul HTML5 Canvas cu jCanvas

Web-ul, așa cum o știm, evoluează mai repede decât oricând. Începând cu târziu, HTML5 intră în scenă, oferind posibilitatea de a dezvolta aplicații web extrem de interactive fără a fi nevoie de Flash-ul proprietar. În schimb, tot ceea ce are nevoie un utilizator este un browser web acceptat și modern, și ei vor putea să se bucure de cele mai bune din ceea ce poate oferi webul.

Totuși, crearea unui astfel de conținut interactiv nu este niciodată la fel de ușoară ca plăcinta, iar regula nu exclude elementul principal al HTML5 care face tot munca: panza. Dacă ați urmărit ce au cele mai recente browsere, unele dintre ele pot include o experiență accelerată de GPU care face ca elementul de panza să funcționeze mult mai bine. Există cadre disponibile care încearcă să facă elementul de panza un pic mai ușor de dezvoltat pentru, în special jQuery. Dar chiar și atunci, jQuery te face să tipi destul de puțin. Dezvoltatorii web, iată ceva mai bun pentru dvs..

Despre jCanvas

jCanvas este un plugin mic jQuery scris în întregime în JavaScript, care face lucrul cu jQuery, și prin urmare elementul de canvas HTML5, mult mai ușor. Dezvoltatorii web vor obține o mulțime de beneficii din utilizarea jCanvas. Folosind jCanvas, veți ajunge să lucrați cu un cod mult mai simplu, în care plugin-ul va face lucrul și îl va traduce în codul relevant pentru ca jQuery să ruleze.

Exemple de utilizare

jCanvas poate desena un număr mare de obiecte. De exemplu, aici putem vedea o elipsă care este umplută cu un gradient. Există o mulțime de parametri pe care îi puteți seta și păstrați încă cantitatea de cod actual cât mai mică posibil. În acest exemplu, parametrii gradientului au fost stabiliți mai întâi (distanțe, culori etc.), urmate de desenarea elipsei. Pentru programatori, aceasta ar trebui să fie o modalitate foarte atrăgătoare de a scrie codul fără sintaxa de tip over-the-top.

În acest exemplu, o imagine jpg obișnuită este inversată la jumătate. Prima funcție (sau set de instrucțiuni) stabilește modul în care are loc inversarea, în timp ce a doua funcție desenează imaginea și încarcă funcția de inversiune pe ea. Când rulează codul, primești o imagine inversă la jumătatea drumului.

În exemplul nostru final, diferite forme sunt desenate prin diferite funcții oferite de jCanvas. Cadrul verde, neîncărcat, a fost desenat printr-o simplă funcție dedicată dreptunghiurilor. Ca întotdeauna, puteți personaliza dreptunghiul dvs., chiar și cu parametrii pentru lățimea cursei și raza de colț (suma pe care colțurile ar trebui să fie rotunjite). Pentagonul este desenat de o funcție mai generică care se aplică tuturor poligoanilor obișnuiți. De asemenea, puteți aplica toți aceiași parametri ca și celelalte funcții.

Diferența este importantă deoarece puteți desena un pătrat cu funcții atât dreptunghi cât și poligon, dar puteți desena doar dreptunghiuri cu funcția dreptunghi. (Pătraturile sunt dreptunghiuri, dar dreptunghiurile nu sunt întotdeauna pătrate!)

Alte informații și asistență

Mai puteți face mai mult cu fiecare funcție, plus multe funcții pe care le puteți utiliza! Puteți descărca jCanvas, mergând aici. Dacă aveți nevoie de ajutor, pagina de documentare completă și bine scrisă ar trebui să clarifice cele mai multe, dacă nu toate, întrebări. În cazul în care acest lucru nu funcționează, puteți contacta dezvoltatorul jCanvas accesând informațiile de aici. Dacă doriți să încercați jCanvas înainte de a juca cu el pe propriul dvs. site, dezvoltatorul a creat o pagină foarte nerăbdător cu Sandbox, unde puteți introduce codul și viziona magia.

În cele din urmă, dacă doriți să contribuiți la proiectul open source jCanvas, sunteți mai mult decât bineveniți să faceți acest lucru mergând aici. jCanvas este întotdeauna îmbunătățită de dezvoltator, iar noi versiuni sunt disponibile la fiecare câteva săptămâni.

Concluzie

jCanvas este un instrument web de mare folos pentru a vă face experiența de programare mult mai simplă, mai ales dacă sunteți un utilizator greu al elementului de panza. Din nou, unele dintre caracteristicile cele mai importante sunt:

• Desenați forme, căi, imagini și text.
• Modelați-le folosind culori, gradienți, modele și umbre.
• Manipulați panza (rotiți, scară, etc).
• O gamă largă de opțiuni pentru a se potrivi nevoilor dvs..

Utilizatorii de Internet vă vor mulțumi și pentru utilizarea jCanvas, deoarece veți avea mai mult timp să vă dezvoltați complet aplicația web și să vă asigurați că dispune de toate funcțiile pe care doriți să le aveți în timp ce vă bucurați de o performanță excelentă.

Sunteți un dezvoltator de web care este implicat în HTML5? Crezi că jCanvas te va ajuta cu dezvoltarea ta? Ce caracteristici doriți să vedeți în jCanvas? (vă rugăm să verificați mai întâi documentația pentru ceea ce este deja implementat!).

Image Credit: Doar Insomnie

Explorați mai multe despre: HTML, HTML5, JavaScript, Web Design, Dezvoltare Web, Instrumente pentru webmasteri.