Annons

Webben som vi känner den utvecklas snabbare än någonsin tidigare. Från sent kommer HTML5 in i scenen, vilket ger förmågan att utveckla mycket interaktiva webbappar utan behov av äganderätt Blixt. Istället är allt som en användare behöver en stödd, modern webbläsare, och de kan njuta av det bästa av vad webben har att erbjuda.

Att skapa sådant interaktivt innehåll är dock aldrig lika enkelt som paj, och den regeln utesluter inte HTML5: s huvudelement som gör allt arbete: duk. Om du har följt vad de senaste webbläsarna har att erbjuda, kan några av dem innehålla en GPU-accelererad upplevelse som gör att dukelementet fungerar mycket bättre. Det finns ramar tillgängliga som försöker göra canvaselementet lite lättare att utveckla för, särskilt jQuery. Men även då gör jQuery att du skriver ganska mycket. Webbutvecklare, här är något bättre för dig.

Om jCanvas

html 5 duk tagg

jCanvas är ett litet jQuery-plugin skriven helt i JavaScript som gör det mycket enklare att arbeta med jQuery, och därmed HTML5s dukelement. Webbutvecklare kommer att få mycket nytta av att använda jCanvas. Genom att använda jCanvas kommer du att arbeta med mycket enklare kod, där plugin kommer att göra arbetet och översätta det till relevant kod för att jQuery ska köras.

instagram viewer

Exempel på användning

html canvas html

jCanvas kan rita ett stort antal objekt. Här kan vi till exempel se en ellips som fylls i med en lutning. Det finns många parametrar som du kan ställa in och fortfarande hålla mängden faktisk kod så liten som möjligt. I detta exempel inställdes gradientparametrarna först (avstånd, färger, etc.) följt av ritningen av själva ellipsen. För programmerare bör detta vara ett väldigt iögonfallande sätt att skriva kod utan syntetisk överkant.

html canvas html

I det här exemplet inverteras en vanlig jpg-bild halvvägs. Den första funktionen (eller instruktionsuppsättningen) anger hur inversionen ska ske, medan den andra funktionen drar bilden och laddar inversionsfunktionen på den. När koden körs får du en halvvägs inverterad bild.

html 5 duk tagg

I vårt sista exempel ritas olika former med hjälp av olika funktioner som tillhandahålls av jCanvas. Den gröna, ofyllda rektangeln ritades med en enkel funktion tillägnad rektanglar. Som alltid kan du anpassa din rektangel, även med parametrar för slagbredden och hörnradie (det belopp som hörnen ska rundas). Pentagon dras av en mer generisk funktion som gäller alla vanliga polygoner. Du kan också tillämpa samma parametrar som med andra funktioner.

Skillnaden är viktig eftersom du kan rita en fyrkant med både rektangel- och polygonfunktionerna, men du kan bara rita rektanglar med rektangelfunktionen. (Kvadrater är rektanglar, men rektanglar är inte alltid rutor!)

Annan information och support

Det finns mycket mer du kan göra med varje funktion, plus det finns många fler funktioner du kan använda! Du kan ladda ner jCanvas genom att gå här. Om du behöver någon hjälp, den fullständiga, välskrivna Dokumentationssida borde klargöra de flesta om inte alla frågor. Om det fortfarande inte fungerar kan du kontakta utvecklaren av jCanvas genom att kolla in hans information här. Om du vill prova jCanvas innan du spelar med det på din egen webbplats har utvecklaren skapat ett väldigt coolt utseende Sandbox sida där du kan ange kod och se hur magin händer.

Slutligen, om du vill hjälpa till att bidra till jCanvas-projektet med öppen källkod, är du mer än välkommen att göra just det genom att gå här. jCanvas förbättras alltid av utvecklaren, och nya utgåvor görs tillgängliga med några veckor.

Slutsats

jCanvas är ett bra webbverktyg att använda för att göra din programmeringsupplevelse mycket enklare, särskilt om du är en tung användare av dukelementet. Återigen är några av höjdpunktsfunktionerna:

  • Rita former, banor, bilder och text.
  • Formera dessa med färger, lutningar, mönster och skuggor.
  • Manipulera duken (rotera, skala osv).
  • Ett stort utbud av alternativ som passar dina behov.

Internetanvändare kommer också att tacka dig för att du använder jCanvas eftersom du har mer tid att utvecklas helt din webbapp och se till att den har all den funktionalitet du vill att den ska ha medan du njuter av bra prestanda.

Är du en webbutvecklare som är engagerad i HTML5? Tror du att jCanvas kommer att hjälpa dig med din utveckling? Vilka funktioner skulle du vilja se i jCanvas? (se först i dokumentationen för vad som redan är implementerat!).

Bildkredit: Bara sömnlöshet

Danny är senior vid University of North Texas som tycker om alla aspekter av open source-programvara och Linux.