Behandle raskt og enkelt HTML5s lerretelement med jCanvas

Internett som vi vet det utvikler seg raskere enn noen gang før. Senest kommer HTML5 inn i scenen, og gir muligheten til å utvikle svært interaktive webapps uten behov for proprietær Flash. I stedet er alle brukerbehov en støttet, moderne nettleser, og de vil kunne nyte det beste av hva nettet har å tilby.

Å lage slik interaktivt innhold er imidlertid aldri så enkelt som paj, og den regelen utelukker ikke HTML5s hovedelement som gjør alt arbeidet: lerret. Hvis du har fulgt hva de nyeste nettleserne har å tilby, kan noen av dem inkludere en GPU-akselerert opplevelse som gjør lerretelementet mye bedre. Det finnes rammebetingelser som prøver å gjøre lerretelementet litt enklere å utvikle for, spesielt jQuery. Men selv da gjør jQuery deg til å skrive ganske mye. Webutviklere, her er noe bedre for deg.

Om jCanvas

jCanvas er et lite jQuery-plugin skrevet helt i JavaScript som gjør det mulig å jobbe med jQuery, og dermed HTML5s lerretelement, mye lettere. Webutviklere vil få stor nytte av å bruke jCanvas. Ved å bruke jCanvas, får du jobbe med mye enklere kode, der plugin vil gjøre arbeidet og oversette det til den aktuelle koden for jQuery å løpe.

Eksempler på bruk

jCanvas kan tegne et stort antall objekter. For eksempel, her kan vi se en ellipse som er fylt ut med en gradient. Det er mange parametere som du kan stille inn og beholder fortsatt mengden av faktisk kode så lite som mulig. I dette eksemplet ble gradientparametrene satt først (avstander, farger, etc.), etterfulgt av tegningen av selve ellipsen. For programmører, bør dette være en veldig øye-tiltalende måte å skrive kode uten over-the-top syntaks.

I dette eksemplet blir et vanlig jpg-bilde halvveis omvendt. Den første funksjonen (eller settet med instruksjoner) angir hvordan inversjonen finner sted, mens den andre funksjonen trekker bildet og laster inversjonsfunksjonen på den. Når koden kjører, får du et halvveis-invertert bilde.

I vårt siste eksempel trekkes forskjellige figurer ved hjelp av forskjellige funksjoner levert av jCanvas. Det grønne, ufylte rektangelet ble tegnet av en enkel funksjon dedikert til rektangler. Som alltid kan du tilpasse rektangelet, selv med parametere for strekkbredde og hjørneradius (hvor mye hjørner skal avrundes). Femkantet er tegnet av en mer generisk funksjon som gjelder for alle vanlige polygoner. Du kan også bruke alle de samme parametrene som med de andre funksjonene.

Forskjellen er viktig fordi du kan tegne et firkant med både rektangel og polygonfunksjoner, men du kan bare tegne rektangler med rektangelfunksjonen. (Firkanter er rektangler, men rektangler er ikke alltid firkanter!)

Annen informasjon og støtte

Det er mye mer du kan gjøre med hver funksjon, pluss det er mange flere funksjoner du kan bruke! Du kan laste ned jCanvas ved å gå her. Hvis du trenger hjelp, bør den fulle, velskrevne dokumentasjonssiden klargjøre de fleste om ikke alle spørsmål. Hvis det fortsatt ikke virker, kan du kontakte utvikleren av jCanvas ved å sjekke ut informasjonen her. Hvis du ønsker å prøve ut jCanvas før du leker med den på ditt eget nettsted, har utvikleren satt opp en veldig kul Sandbox-side der du kan skrive inn kode og se det magiske tilfelle.

Til slutt, hvis du ønsker å bidra til å bidra til open source jCanvas-prosjektet, er du hjertelig velkommen til å gjøre nettopp det ved å gå her. jCanvas blir alltid forbedret av utvikleren, og nye utgivelser blir gjort tilgjengelige noen få uker.

Konklusjon

jCanvas er et flott nettverktøy for å gjøre programmeringsopplevelsen enklere, spesielt hvis du er en tung bruker av lerretelementet. Igjen, noen av høydepunktene er:

• Tegn figurer, stier, bilder og tekst.
• Stil disse med farger, gradienter, mønstre og skygger.
• Manipuler lerretet (roter, skala, etc.).
• Et stort utvalg av alternativer som passer dine behov.

Internett-brukere vil også takke deg for å bruke jCanvas, fordi du får mer tid til å utvikle din web-app fullstendig og sørge for at den har all funksjonalitet du vil ha den mens du nyter god ytelse.

Er du en webutvikler som er involvert i HTML5? Tror du at jCanvas hjelper deg med utviklingen din? Hvilke funksjoner vil du se i jCanvas? (vennligst sjekk dokumentasjonen først for det som allerede er implementert!).

Bildekreditt: Bare søvnløshet

Utforsk mer om: HTML, HTML5, JavaScript, Webdesign, Webutvikling, Verktøy for nettredaktører.