Share
Met de komst van tools zoals Adobe Edge en bibliotheken als EaselJS, komen er meer middelen beschikbaar voor ontwikkelaars die interactieve HTML5-content willen maken. Veel van deze tools zijn specifiek afgestemd op Flash-ontwikkelaars om de overgang van ActionScript naar HTML5-canvas soepel te laten verlopen. Dit artikel geeft een overzicht van oCanvas, een HTML5-bibliotheek die ontwikkelaars mogelijk niet alleen van onschatbare waarde vinden, maar ook heel gemakkelijk te gebruiken.
Voordat we duiken in het verkennen van oCanvas, laten we snel de scène bepalen voor hoe HTML5 canvas werkt. Als je een meer grondige uitleg wilt over het gebruik van HTML5 canvas, bekijk dan deze tutorial.
Als u ActionScript kent, kent u al veel JavaScript, wat de echte kracht is wanneer u met canvas werkt. We gebruiken de HTML5-teken-API om onze inhoud samen met enkele goede JavaScript-codes te maken om dingen interactief en dynamisch te maken. Maar wanneer we de twee combineren, is de aanpak achter het samenstellen van onze code een beetje anders dan wat we gewoon zijn met ActionScript.
Kortom, om de native Canvas API te gebruiken, tekenen we pixels op de tekencontext van het canvas. Maar het belangrijkste om te onthouden is dat we met het hele canvas werken, niet alleen een enkele vorm of afbeelding die we hebben getekend. Telkens als we iets willen veranderen dat we hebben getekend, moeten we het hele canvas opnieuw tekenen. Als we iets willen animeren, moeten we het canvas steeds weer opnieuw tekenen in ons JavaScript zodat het lijkt alsof de dingen in beweging zijn.
Deze notie lijkt erg op traditionele animatie, waarbij animators elke pose in hun volgorde moesten tekenen en de camera heel snel door deze bewegingen moest laten bewegen om beweging te simuleren. Maar als je gewend bent aan boomachtige structuren zoals de DOM of de weergavenlijst in Actionscript, kan dit idee moeilijk zijn om je hoofd rond te krijgen. Deze spoel- en herhaalbenadering van programmeren verschilt aanzienlijk van het werken met objecten voor de meeste ontwikkelaars.
Gelukkig voor degenen onder ons die zo gewend zijn om met objecten te werken, brengt oCanvas die vertrouwde benadering van HTML5 canvas. oCanvas is een JavaScript-bibliotheek die is ontwikkeld door Johannes Koggdal met de bedoeling om het gemakkelijker te maken zich te ontwikkelen met HTML5 canvas. Hiermee kun je rechtstreeks met objecten werken, hun eigenschappen aanpassen en gebeurtenissen aan iedereen koppelen, terwijl je de vele dingen achter de schermen voor je verwerkt. Zoals het beste door Johannes op zijn blog is gezet:
Mijn doel is altijd geweest om het voor mensen heel gemakkelijk te maken om canvas dingen te bouwen op basis van objecten. Ik besloot de naam oCanvas als een samentrekking van "object canvas".
Om oCanvas te gaan gebruiken, moeten we een kopie van de bibliotheek opnemen op onze HTML-pagina. We kunnen verwijzen naar het door CDN gehoste bestand of zelf een lokale kopie hosten. Spring naar de oCanvas-website en je kunt een kopie van de bibliotheek downloaden of de verwijzing naar de CDN-gehoste versie pakken. De huidige versie is 2.0 en werd slechts een paar weken geleden uitgebracht, waarmee veel van de bugs in de oorspronkelijke release werden aangepakt. Op de site is er een verkleinde productieversie, die goed te gebruiken is wanneer u klaar bent om uw project te implementeren. Er is ook een ontwikkelingsversie, die niet is gecomprimeerd, maar beter is voor foutopsporing. Ik vind het leuk om rechtstreeks naar de gehoste versie te linken voor sneller laden en cachen door de browser.
Nadat u een verwijzing naar oCanvas hebt gemaakt, moeten we vervolgens een canvaselement in de hoofdtekst van onze HTML instellen en een verwijzing ernaar maken voor gebruik in ons Javascript.
Zoals altijd, als u uw script boven het canvaselement plaatst, moet u het in een functie plaatsen, zodat u weet dat de DOM gereed is. Er zijn een paar manieren om hier naartoe te gaan. Je kunt je eigen functie maken en deze dan in je lichaamselement oproepen wanneer deze wordt geladen, zoals dit:
function Main () // uw oCanvas-code
Of u kunt uw code in de ingebouwde versie van oCanvas verpakken domReady () methode. Dit is het equivalent van jQuery's $ (Document) .ready (). In oCanvas gebruiken we dit:
oCanvas.domReady (function () // Uw code hier);
Notitie: Je zou jQuery's kunnen gebruiken $ (Document) .ready () methode als je dat wilde.
Dit stuk code is absoluut noodzakelijk en het is het eerste dat je moet schrijven als je oCanvas gebruikt.
var canvas = oCanvas.create (canvas: "#canvas", background: "# 0cc", fps: 60);
In deze code slaan we een verwijzing op naar het canvas-element in ons document en krijgen we toegang tot de kerninstantie, waarmee u kunt beginnen met het maken van objecten. De create () methode neemt een object als zijn argument dat bepaalt hoe oCanvas zal werken. Er zijn tal van eigenschappen om over te gaan in de create () methode, maar de enige verplichte is de eigenschap canvas: een CSS-selector die moet verwijzen naar een canvaselement in de DOM.
De andere eigenschappen die in de bovenstaande code worden doorgegeven, zijn de achtergrond- en fps-eigenschappen. Met de eigenschap background kunt u een achtergrond van het canvas toepassen, die CSS-kleurwaarden, -verlopen en -afbeeldingen kan zijn. Als het wordt weggelaten, is het canvas transparant. Met de eigenschap fps stelt u het aantal frames per seconde in voor welke animatie dan ook wordt uitgevoerd. De standaardinstelling is 30 fps.
Notitie: Hoewel we veel van de functies in oCanvas bekijken, raad ik aan de documentatie van de bibliotheek te bekijken om een beter inzicht te krijgen in elke sectie.
Er zijn talloze soorten weergave-objecten die u kunt maken met oCanvas. U kunt vormen maken zoals rechthoeken, ellipsen, polygonen en lijnen, samen met afbeeldingen, tekst en zelfs Sprite-bladen. Om een nieuw weergaveobject te maken, gebruiken we de displaymodule van oCanvas en specificeren we welk type weergaveobject we willen maken, evenals enkele basiseigenschappen, zoals:
var box = canvas.display.rectangle (x: 50, y: 150, width: 50, height: 50, fill: "# 000");
Om het vervolgens aan het scherm toe te voegen, noemen we een bekende methode voor u Flash-ontwikkelaars ...
Ja, een ouwe maar een goodie, waardoor het toevoegen van objecten aan oCanvas een vertrouwd proces is. Dus om onze doos aan het canvas toe te voegen, zouden we schrijven:
canvas.addChild (doos);
Net zoals in ActionScript, addChild () voegt het opgegeven object toe als een kind van de beller. En op zijn beurt zijn de x en y van het kind relatief ten opzichte van de ouder. Dus in dit geval maken we van box een kind van het canvas, wat we op deze manier zouden kunnen vereenvoudigen:
box.add ();
De toevoegen() methode voegt ook het object toe aan het canvas - wat eigenlijk hetzelfde is als canvas.addChild (kader). Maar addChild () is het nuttigst om een object als een kind toe te voegen aan een reeds gemaakt weergaveobject, zoals:
var square = canvas.display.rectangle (x: 0, y: 0, width: 10, height: 10, fill: "# 990000"); box.addChild (vierkant);
Laten we eens kijken naar enkele van de verschillende soorten weergaveobjecten die u in oCanvas kunt maken.
Je hebt al een vierkant gezien, maar we kunnen het gebruiken rechthoek object weergeven om veel dingen te maken. Dit is een rechthoek met een blauwe lijn:
var rectangle = canvas.display.rectangle (x: 500, y: 100, width: 100, height: 200, fill: "# 000", stroke: "outside 2px blue");
De vullen eigenschap kan elke geldige CSS-kleur aannemen, samen met CSS-verlopen en zelfs afbeeldingspatronen.
Om een ellips te maken zouden we schrijven:
var ellipse = canvas.display.ellipse (x: 100, y: 100, radius_x: 20, radius_y: 30, fill: "rgba (255, 0, 0, 0.5)");
Als u een volledige cirkel wilt, vervangt u gewoon de radius_x en radius_y eigenschappen met een single radius eigendom.
Het maken van elk soort reguliere polygoon is net zo eenvoudig - het enige dat u hoeft te doen, is het aantal zijden en de radius opgeven die u wilt dat uw vorm heeft. Om een driehoek te maken:
var triangle = canvas.display.polygon (x: 320, y: 145, sides: 3, radius: 50, fill: "# 406618");
Wat dacht je van een vijfhoek?
var pentagon = canvas.display.polygon (x: 200, y: 50, sides: 5, rotation: 270, radius: 40, fill: "# 790000");
Om dit te bereiken met de HTML5-canvas-API, zou je een aantal paden moeten tekenen en uitzoeken welke x- en y-posities ze moeten gebruiken. Ik probeerde om een octagon te tekenen ter vergelijking, maar zoals je hieronder kunt zien gaf ik het vrij gemakkelijk op. Niet helemaal zeker wat dit hoort te zijn.
Accentsconagua
var canvas = $ ("# canvas"); var ctx = canvas.get (0) .getContext ("2d"); ctx.fillStyle = '# 000'; ctx.beginPath (); ctx.moveTo (0, 0); ctx.lineTo (100,50); ctx.lineTo (50, 100); ctx.lineTo (0, 90); ctx.closePath (); ctx.fill (); Het maken van weergave-objecten met afbeeldingen wordt niet eenvoudiger dan in oCanvas. Geef gewoon een x- en y-positie en het pad naar het afbeeldingsbestand op:
var tree = canvas.display.image (x: 100, y: 350, image: "tree.png");
Een leuke functie van het afbeeldingsweergaveobject is de tegel eigenschap, waarmee u eenvoudig een raster van dezelfde afbeelding kunt maken in plaats van het steeds opnieuw te tekenen.
oCanvas bevat een tekstweergaveobject en behandelt het lettertype, net als CSS.
var text = canvas.display.text (x: 70, y: 300, align: "center", font: "bold 18px sans-serif", tekst: "oCanvas Rocks", vul in: "purple");
U kunt veel van de andere teksteigenschappen gebruiken die u kent van CSS. Bekijk de documentatie over tekst voor meer informatie.
Alle weergaveobjecten nemen een gemeenschappelijke groep eigenschappen en methoden over. Enkele van de meest voorkomende eigenschappen van weergaveobjecten zijn: x, y, width, height, rotation, scalingX, scalingY, opacity, shadow (gebruikt CSS-box-shadow syntaxis) en zIndex. U kunt deze link bekijken voor een volledige lijst van de basiseigenschappen en methoden. Laten we een paar andere opmerkelijke bekijken.
Deze methode bespaart u veel tijd omdat u hiermee eenvoudig de oorsprong in het object kunt instellen. Met andere woorden, hiermee kunt u het registratiepunt van het object instellen. Als je ooit geprobeerd hebt om een rotatie vanuit het midden uit te voeren met de HTML5 Canvas API, weet je hoe groot de hoofdpijn kan zijn. Je moet een hoop acties ondernemen om de tekenstatus op te slaan, het canvas te vertalen, je rotatie uit te voeren en vervolgens de tekenstatus te herstellen. Met de oorsprong eigenschap kunt u gemakkelijk de oorsprong van een object bepalen:
var obj = canvas.display.image (x: 270, y: 270, origin: x: "center", y: "center");
Dit zou het beeld vanuit het midden tekenen; als we het voorwerp zouden roteren, zou het ook vanuit het midden draaien. Naast 'midden' zou je ook in 'links' of 'rechts' kunnen doorgeven voor de x en 'boven' of 'onder' voor de y-posities. Naast het gebruik van de vooraf gedefinieerde zoekwoorden, kunt u ook positieve of negatieve getallen opgeven als waarden van waar u het object wilt tekenen. De standaardoorsprong voor alle weergaveobjecten wordt linksboven gedefinieerd.
U kunt ook de setOrigin () methode op elk gewenst moment om de oorsprong van een object te definiëren:
obj.setOrigin ("left", "bottom") De id van een weergaveobject, die eigenlijk alleen-lezen is, komt overeen met waar het object in de tekenlijst staat - wat u kunt zien als de weergavelijst. Ik vind het erg handig omdat het kan dienen als een unieke ID in bepaalde situaties waarin u mogelijk een specifiek object in uw code zoekt. Overweeg een basisfragment als dit:
getId (box.id) functie getId (id) if (id == 9) console.log ("CORRECT!" + id) else console.log ("WRONG!" + id) De eigenschap composition is het equivalent van globalCompositeOperation binnen de native Canvas API. Als u er niet bekend mee bent, bepaalt dit in feite hoe pixels worden weergegeven wanneer ze worden getekend op reeds bestaande pixels op het canvas. Ik raad u aan om de verschillende compositing-bewerkingen die u kunt instellen te lezen, maar met oCanvas kunt u eenvoudig de gewenste bewerking instellen door deze als een tekenreeks door te geven:
var shape = canvas.display.rectangle (x: 270, y: 270, width: 180, height: 80, fill: "# ff6900", composition: "destination-atop");
Er zijn veel verschillende bewerkingen die u kunt doorgeven, maar ik denk dat een van de handige dingen die u met de eigenschap composition kunt doen, maskers maken tussen verschillende weergaveobjecten. Bekijk het bestand met de naam masks.html in het downloadpakket. Als u ooit hebt vertrouwd op het maken van laagmaskers in uw Flash-toepassingen, zult u hiervan genieten.
Omdat we eerder roterende objecten noemden, kun je een object snel roteren met de draaien() en rotateTo () methoden:
obj.rotate (45);
U kunt ook eenvoudig de rotatie-eigenschap instellen:
obj.rotation = 45;
Er is ook de bewegen () en moveTo () methoden die, zoals hun namen doen vermoeden, u in staat stellen om een object te verplaatsen met een opgegeven aantal pixels voor de eerstgenoemde en naar een opgegeven x- en y-positie voor de laatste.
obj.moveTo (100, 100)
Hetzelfde idee werkt voor de schaal() en scaleTo () methoden ():
obj.scale (1.25, 0.25) obj.scaleTo (1.5, 1.5)
We hebben genoemd addChild () voor; laten we niet vergeten removeChild () en removeChildAt (). En zoals de toevoegen() methode, kunnen we het tegenovergestelde doen met verwijderen().
Een andere echt nuttige methode is clone (), waarmee u een weergaveobject en alle bijbehorende eigenschappen kunt dupliceren.
var box = canvas.display.rectangle (x: 50, y: 150, width: 50, height: 50, fill: "# 000"); var box2 = box.clone (x: 200)
Een groot pluspunt voor oCanvas is dat je evenementen aan specifieke objecten kunt toevoegen. De oCanvas bevat vele methoden en eigenschappen voor het gemakkelijk verwerken van muis-, toetsenbord- en zelfs aanraakgebeurtenissen allemaal met één eenvoudige methode.
Als u bekend bent met jQuery, weet u waarschijnlijk al waar ik heen ga.
canvas.bind ("click tap", function () canvas.background.set ("# efefef");); Dit alles verandert de achtergrondkleur van het canvas, maar let op hoe we passeren in "klik" - waardoor we eenvoudig ondersteuning kunnen toevoegen voor zowel muis- als aanrakingsapparaten.
Naast klikgebeurtenissen, kunt u ook naar andere muisevenementen luisteren:mousedown, mouseup, mousemove, mouseenter, mouseleave en DblClick.
Een eenvoudig rollover-effect kan er als volgt uitzien:
box.bind ("mouseenter", function () canvas.background.set ("# 333");). bind ("mouseleave", function () canvas.background.set ("# 000"); ); Dit is een voorbeeld van chaining-functies - die (niet te klinken als een gebroken record) een andere jQuery-functie is die wordt gebruikt in oCanvas.
Maar in plaats van het canvas te wijzigen wanneer een muisgebeurtenis plaatsvindt, hoe zit het met het wijzigen van een echt weergaveobject? Dit is tenslotte nog steeds HTML5 Canvas, dus we moeten onthouden dat we een belangrijke methode moeten noemen om het canvas te laten bijwerken.
De terugtrekken() methode (die feitelijk deel uitmaakt van de Draw-module, niet van de Events-module) hertekent het canvas opnieuw met alle displayobjecten die zijn toegevoegd. Dus als u een actie wilt uitvoeren op een bepaald object en de rest van de tekenlijst intact wilt laten, moeten we deze eenvoudige coderegel aan onze functies toevoegen:
square.bind ("klik op klikken", functie () square.x + = 50; canvas.redraw ();); Wat hebben luisteraars van een evenement als ze niet kunnen worden verwijderd??
rectangle.bind ("klik op klikken", functie onClick () this.fill = "# FF9933"; canvas.redraw (); rectangle.unbind ("click tap", onClick)); We hebben het niet nodig binden() methode voor deze. We schrijven gewoon:
circle.dragAndDrop ();
Dat is waarschijnlijk de snelste en gemakkelijkste slepen-en-neerzettencode die je ooit zult schrijven.
Opmerking over evenementen: Wanneer je met evenementen werkt, is het normaal dat je zoveel mogelijk informatie wilt over het evenement. Gelukkig kunnen we dat nog steeds doen als we met oCanvas werken. Als we bijvoorbeeld de click-handler een paar regels omhoog nemen en de gebeurtenis bij de console registreren, kunnen we alle eigenschappen bekijken die we van het evenement hebben..
rectangle.bind ("click tap", functie onClick (e) this.fill = "# FF9933"; canvas.redraw (); rectangle.unbind ("click tap", onClick); console.log (e); ); 
Naast muisevenementen heeft oCanvas hele modules gewijd aan toetsenbord- en aanraakgebeurtenissen met hun eigen unieke methoden en eigenschappen. Deze evenementen worden ook afgehandeld met de binden() methode. Het gebeurtenissensysteem in oCanvas is een zeer breed onderwerp, dus ik moedig het bekijken van de gebeurtenissen in de documentatie en het experimenteren aan.
Met de Tijdlijnmodule kunnen we onze hoofdlus voor onze toepassing instellen. Als je een spel aan het maken was, zou dit in wezen je gamelus zijn. Ik zie het graag als het equivalent van een ENTER_FRAME in Flash.
Het is eenvoudig in te stellen - we bellen gewoon het setLoop functie en keten de begin() methode om het:
canvas.setLoop (function () triangle.rotation + = 5;). start ();
Als we het wilden binden setLoop () functie aan een evenement - zeg een muisklik - kunnen we zoiets als dit doen:
canvas.setLoop (function () triangle.rotation + = 5;) button.bind ("click tap", function () canvas.timeline.start ()); En we kunnen de tijdlijn stoppen door simpelweg te bellen:
canvas.timeline.stop ();
Gebruik makend van setLoop () is de manier om te gaan voor animaties die zich over een lange tijdsperiode zullen voordoen en om constante updates te verwerken die je gedurende je hele applicatie moet maken. Maar oCanvas heeft methoden ingebouwd om eenvoudigere en elementaire animaties aan te kunnen die gewoonlijk nodig zijn. Deze methoden worden ook vrijwel letterlijk overgenomen uit jQuery.
De animeren () methode werkt net als in jQuery. Als je niet bekend bent met deze kant van jQuery, bedenk dan of het een tweening-engine zoals TweenMax of Tweener voor Flash is. U kunt elke eigenschap animeren die kan worden ingesteld met een numerieke waarde:
circle.animate (y: circle.y - 300, scalingX: .5, scalingY: .5, "short", "ease-in", function () circle.fill = "# 45931e"; canvas.redraw (););
Hier animeren we de y-positie van de cirkel en de algehele grootte, passen we wat versnelling toe en wanneer deze is voltooid, voeren we een callback-functie uit die de opvulkleur verandert. Maar vergeet niet te bellen terugtrekken().
fadeIn (), Fadeout (), en vervaag naar() Om een object in en uit te laten verdwijnen, kunnen we gewoon bellen:
square.fadeIn (); square.fadeOut ();
Om de dekking te vervagen tot een specifieke waarde, zouden we gebruiken vervaag naar():
square.fadeTo (0,6);
U kunt ook de duur, versoepeling en een callback-functie voor deze methoden definiëren op dezelfde manier als met de animeren () methode.
oCanvas bevat een zeer nuttige Scenes Module waarmee je eenvoudig je applicatie in verschillende staten kunt scheiden. Game-ontwikkelaars waarderen dit misschien omdat het een eenvoudige manier is om je spel in verschillende secties op te splitsen. Zelfs Flash-animators op de oude school kunnen de scènemodule vergelijken met het paneel Scènes, waarmee je letterlijk verschillende scènes kunt maken binnen een Flash-project.
Om een scène in oCanvas te creëren, noemen we de create () methode om een te retourneren scenes voorwerp:
var intro = canvas.scenes.create ("intro", function () // hier weergave-objecten toevoegen); Binnen de create () methode geven we in twee argumenten door: de naam van de scène als een tekenreeks en een functie waarin we het weergaveobject toevoegen dat we aan die scène willen toevoegen.
var introText = canvas.display.text (x: canvas.width / 2, y: canvas.height / 2, align: "center", font: "bold 36px sans-serif", tekst: "Introduction", vul in: "# 133035"); var intro = canvas.scenes.create ("intro", function () this.add (introText);); Nu moeten we onze scène laden en die objecten zullen aan het scherm worden toegevoegd:
canvas.scenes.load ( "intro");
Merk op dat we de naam doorgeven die we aan de scène gaven toen we het creëerden.
En natuurlijk kunnen we op elk moment een scène uitladen:
canvas.scenes.unload ( "intro");
Stel je voor hoeveel tijdwinst dit kan opleveren als je scenes en event-handlers tegelijk hebt gebruikt.
Het enige echte nadeel van oCanvas is dat het niet zoveel tractie in de ontwikkelgemeenschap heeft opgedaan als je zou kunnen raden - of dat lijkt het op zijn minst voor nu. Een deel van die reden is volgens mij de populariteit van EaselJS. Er lijkt meer bekendheid en middelen te zijn voor EaselJS dan voor oCanvas - wat moeilijk te geloven is sinds de laatste werd uitgebracht in maart 2011, maar om een of andere reden is het onder de radar gevlogen.
Ik gebruik beide bibliotheken al geruime tijd en ik kan eerlijk zeggen dat ik een grote fan van beide ben. EaselJS voelt absoluut meer aan alsof u ActionScript gebruikt en als u een Flash-ontwikkelaar bent, kunt u deze eenvoudig ophalen. En zoals we hebben gezien, konden oCanvas op vele manieren doorgaan voor de lang verloren broer van jQuery. Dus als je een pure ActionScripter bent, zou je van nature aangetrokken kunnen worden naar EaselJS - vooral omdat Easel specifiek was geschreven om een beroep te doen op Flash-ontwikkelaars.
Ik gebruik Actionscript echter veel langer dan jQuery en ik vind oCanvas persoonlijk eenvoudiger in gebruik en minder uitgebreid om te schrijven. En hoewel EaselJS vrij eenvoudig te gebruiken is, maakt de eenvoudige syntaxis in oCanvas het gewoon een graag gezien hulpmiddel.
Maar naast de eenvoudiger syntaxis zijn oCanvas en EaselJS op veel manieren vrijwel onderling uitwisselbaar. Beide bibliotheken kunnen min of meer dezelfde taken uitvoeren en er is zeer weinig verschil in de prestaties, indien aanwezig. Ik merk echter dat de Ticker-functie in EaselJS iets soepeler loopt dan oCanvas ' setLoop functie (hoewel dat alleen een op een browser gebaseerd verschil zou kunnen zijn).
EaselJS heeft veel meer een uitgebreide API - vooral als het gaat om tekenen en effecten. En als u rekening houdt met TweenJS en SoundJS, is Easel absoluut een completere tool, vooral als u gewend bent om een toepassing zoals Flash te gebruiken die uw projecten nauwkeurig afstemt. Maar als je het hele HTML5-spel nog niet kent, loop je waarschijnlijk veel sneller met oCanvas. Toen ik voor het eerst kennismaakte met oCanvas, vond ik het zo leuk om mee te spelen. Alles is er al voor u - alle noodzakelijke methoden en gebeurtenissen om meteen objecten te creëren, te manipuleren en te animeren.
Welke bibliotheek u ook kiest, oCanvas en EaselJS zijn slechts het begin van wat volgens mij een toestroom van hulpmiddelen en bronnen zal zijn, zodat ontwikkelaars eenvoudig browsergebaseerde applicaties kunnen maken. De kenmerken van oCanvas die in dit artikel worden beschreven, zijn nauwelijks een kras op het oppervlak van wat zou kunnen worden gemaakt met behulp van deze zeer krachtige bibliotheek.
In geen geval is oCanvas (of welke bibliotheek dan ook) een reden om de native HTML5 Canvas API niet te leren en te gebruiken. Maar als u zich in een situatie bevindt waarin al uw voormalige Flash-clients u nu zoeken om HTML5-apps te maken (zoals de mijne) en u geen tijd hebt om iets te leren als de onvriendelijke transformatiematrix in de native Canvas API - oCanvas kan de leercurve zeker verlichten.
