Snel & gemakkelijk HTML5's canvas-element manipuleren met jCanvas

Het internet zoals we het kennen evolueert sneller dan ooit tevoren. Als laatste komt HTML5 in de scene en biedt het de mogelijkheid om zeer interactieve web-apps te ontwikkelen zonder de eigen Flash. In plaats daarvan is alles wat een gebruiker nodig heeft een ondersteunde, moderne webbrowser en kunnen ze genieten van het beste wat internet te bieden heeft.

Het maken van dergelijke interactieve inhoud is echter nooit zo eenvoudig als taart, en die regel sluit HTML5's belangrijkste element dat al het werk doet niet uit: canvas. Als u hebt gevolgd wat de nieuwste browsers te bieden hebben, kunnen sommige hiervan een GPU-versnelde ervaring bevatten waardoor het canvaselement veel beter presteert. Er zijn frameworks beschikbaar die proberen het canvas-element een beetje makkelijker te ontwikkelen, met name jQuery. Maar zelfs dan laat jQuery je een beetje typen. Webontwikkelaars, hier is iets beters voor jou.

Over jCanvas

jCanvas is een kleine jQuery-plug-in die volledig in JavaScript is geschreven en die het werken met jQuery en daarmee het canvas-element van HTML5 een stuk eenvoudiger maakt. Webontwikkelaars zullen veel profijt hebben van het gebruik van jCanvas. Door jCanvas te gebruiken, ga je aan de slag met veel eenvoudigere code, waarbij de plug-in het werk doet en vertaalt naar de relevante code voor jQuery om te draaien.

Voorbeelden van gebruik

jCanvas kan een groot aantal objecten tekenen. Hier zien we bijvoorbeeld een ellips die is ingevuld met een verloop. Er zijn veel parameters die u kunt instellen en toch de hoeveelheid werkelijke code zo klein mogelijk houden. In dit voorbeeld werden eerst de verloopparameters ingesteld (afstanden, kleuren, etc.), gevolgd door de tekening van de ellips zelf. Voor programmeurs moet dit een zeer aantrekkelijke manier zijn om code te schrijven zonder over-the-top syntaxis.

In dit voorbeeld wordt een normale jpg-afbeelding halverwege omgekeerd. De eerste functie (of reeks instructies) bepaalt hoe de inversie plaatsvindt, terwijl de tweede functie de afbeelding tekent en de inversiefunctie erop laadt. Wanneer de code wordt uitgevoerd, krijgt u een afbeelding die halverwege is omgekeerd.

In ons laatste voorbeeld worden verschillende vormen getekend door middel van verschillende functies die door jCanvas worden geboden. De groene, ongevulde rechthoek is getekend met een eenvoudige functie voor rechthoeken. Zoals altijd kunt u uw rechthoek aanpassen, zelfs met parameters voor de streekbreedte en hoekradius (het aantal hoeken dat moet worden afgerond). De pentagon wordt getekend door een meer generieke functie die van toepassing is op alle reguliere polygonen. U kunt ook dezelfde parameters toepassen als bij de andere functies.

Het verschil is belangrijk omdat je een vierkant kunt tekenen met zowel de rechthoek- als polygoonfuncties, maar je kunt alleen rechthoeken tekenen met de rechthoekfunctie. (Vierkanten zijn rechthoeken, maar rechthoeken zijn niet altijd vierkanten!)

Andere informatie en ondersteuning

Er is veel meer dat u met elke functie kunt doen, plus er zijn veel meer functies die u kunt gebruiken! Je kunt jCanvas downloaden door hierheen te gaan. Als u hulp nodig heeft, moet de volledige, goed geschreven documentatiepagina de meeste, zo niet alle vragen verduidelijken. Als dat nog steeds niet werkt, kunt u contact opnemen met de ontwikkelaar van jCanvas door zijn informatie hier te bekijken. Als je jCanvas wilt uitproberen voordat je ermee speelt op je eigen site, heeft de ontwikkelaar een zeer cool ogende Sandbox-pagina opgezet waar je code kunt invoeren en het magische kunt zien gebeuren.

Als u tenslotte wilt bijdragen aan het open source jCanvas-project, bent u meer dan welkom om dat te doen door hierheen te gaan. jCanvas wordt altijd verbeterd door de ontwikkelaar en nieuwe releases worden om de paar weken beschikbaar gesteld.

Conclusie

jCanvas is een geweldige webtool om te gebruiken om uw programmeerervaring veel eenvoudiger te maken, vooral als u een zware gebruiker van het canvaselement bent. Nogmaals, enkele van de hoogtepunten zijn:

• Vormen, paden, afbeeldingen en tekst tekenen.
• Stijl deze met kleuren, verlopen, patronen en schaduwen.
• Het canvas manipuleren (roteren, schalen, enz.).
• Een enorm scala aan opties om aan uw behoeften te voldoen.

Internetgebruikers zullen u ook bedanken voor het gebruik van jCanvas, omdat u meer tijd heeft om uw webapp volledig te ontwikkelen en ervoor te zorgen dat deze alle functionaliteit heeft die u wilt, terwijl u geniet van geweldige prestaties.

Bent u een webontwikkelaar die betrokken is bij HTML5? Denk je dat jCanvas je zal helpen met je ontwikkeling? Welke functies zou u willen zien in jCanvas? (raadpleeg eerst de documentatie voor wat al is geïmplementeerd!).

Image Credit: Just Insomnia

Ontdek meer over: HTML, HTML5, JavaScript, Webontwerp, Webontwikkeling, Webmasterhulpprogramma's.