Snabbt och enkelt manipulera HTML5 s Canvas Element med jCanvas

Webben som vi känner det utvecklas snabbare än någonsin tidigare. Senast kommer HTML5 in i scenen och ger möjlighet att utveckla mycket interaktiva webbapps utan att behöva använda proprietär Flash. I stället är alla användares behov en modern webbläsare som stöds, och de kommer att kunna njuta av det bästa av vad webben har att erbjuda.

Att skapa sådant interaktiv innehåll är dock aldrig lika lätt som paj, och den här 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 vissa av dem innehålla en GPU-accelererad upplevelse som gör att dukelementet kan köras mycket bättre. Det finns ramar tillgängliga som försöker göra dukelementet lite lättare att utveckla för, särskilt jQuery. Men även då gör jQuery att du skriver en hel del. Webbutvecklare, här är något bättre för dig.

Om jCanvas

jCanvas är ett litet jQuery-plugin skrivet helt i JavaScript som gör att man arbetar med jQuery, och därmed HTML5s dukelement, mycket lättare. Webbutvecklare kommer att få stor nytta av att använda jCanvas. Genom att använda jCanvas får du arbeta med mycket enklare kod, där plugin kommer att göra arbetet och översätta det till den aktuella koden för att jQuery ska springa.

Exempel på användning

jCanvas kan rita ett stort antal objekt. Till exempel kan vi se en ellips som fylls i med en gradient. Det finns många parametrar som du kan ställa in och ändå behålla mängden av faktisk kod så liten som möjligt. I detta exempel sattes gradientparametrarna först (avstånd, färger etc.) följt av ritningen av själva ellipsen. För programmerare bör detta vara ett mycket ögonblickligt sätt att skriva kod utan någon överstegssyntax.

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

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

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

Övrig 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å hit. Om du behöver hjälp, ska den fullständiga, välskrivna dokumentationssidan 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 den på din egen webbplats har utvecklaren skapat en mycket snygg Sandbox-sida där du kan skriva in kod och se den magiska hända.

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

Slutsats

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

• Rita former, vägar, bilder och text.
• Stil dessa genom att använda färger, gradienter, mönster och skuggor.
• Manipulera duken (rotera, skala, etc.).
• Ett stort utbud av alternativ som passar dina behov.

Internetanvändare kommer också att tacka för att använda jCanvas, eftersom du får mer tid att utveckla din webbapplikation fullständigt och se till att den har all den funktionalitet du vill ha den samtidigt som du har bra prestanda.

Är du en webbutvecklare som är inblandad i HTML5? Tror du att jCanvas hjälper dig med din utveckling? Vilka funktioner skulle du vilja se i jCanvas? (se dokumentationen först för det som redan har implementerats!).

Bildkrediter: Bara sömnlöshet

Utforska mer om: HTML, HTML5, JavaScript, webbdesign, webbutveckling, verktyg för webbansvariga.