Share
Med tillkomsten av verktyg som Adobe Edge och bibliotek som EaselJS blir fler resurser tillgängliga för utvecklare som vill skapa interaktivt HTML5-innehåll. Många av dessa verktyg är anpassade specifikt för Flash-utvecklare för att göra övergången från ActionScript till HTML5-duk en smidig. Den här artikeln kommer att översätta oCanvas, ett HTML5-bibliotek som utvecklare inte bara kan hitta ovärderligt men också mycket lätt att använda.
Innan vi dyker in på att utforska oCanvas, låt oss snabbt ställa in platsen för hur HTML5-kanfas fungerar. Om du vill ha en grundligare förklaring om hur du använder HTML5-kanfas, kolla in den här handledningen.
Om du känner till ActionScript vet du redan mycket JavaScript, det är där den verkliga kraften ligger när du arbetar med duk. Vi använder HTML5-ritning API för att skapa vårt innehåll tillsammans med några bra ol 'JavaScript för att göra saker interaktiva och dynamiska. Men när vi kombinerar de två, är inställningen bakom hur vi går om att sätta ihop vår kod något annorlunda än vad vi är vana vid med ActionScript.
Kort sagt, för att använda det inbyggda Canvas API, ritar vi pixlar på teckens kontext. Men det viktigaste att komma ihåg är att vi arbetar med hela duken, inte bara en enda form eller bild som vi har ritat. Varje gång vi vill ändra något vi har ritat måste vi skriva om hela duken. Om vi vill animera någonting, måste vi skriva om på duken igen och igen i vår JavaScript så att det verkar som om sakerna rör sig.
Denna uppfattning liknar väldigt traditionell animering, där animatörer måste rita varje ställning i sin ordning och få kameran att flytta igenom dem mycket snabbt för att simulera rörelse. Men om du är van vid trädliknande strukturer som DOM eller visningslistan i Actionscript, kan det här vara svårt att ta sig runt huvudet. Denna sköljning och upprepning till programmering är mycket annorlunda än att arbeta med objekt för de flesta utvecklare.
Lyckligtvis för de av oss som är så vana vid att arbeta med objekt, kommer oCanvas med det välbekanta tillvägagångssättet till HTML5-duk. oCanvas är ett JavaScript-bibliotek som utvecklats av Johannes Koggdal för att göra det lättare att utveckla med HTML5-kanfas. Det gör det möjligt för dig att arbeta direkt med objekt, ändra sina egenskaper och koppla till händelser till dem alla samtidigt som du hanterar nitty-gritty bakom kulisserna saker för dig. Som bäst av Johannes på hans blogg:
Mitt mål har alltid varit att göra det väldigt lätt för människor att bygga kanvas saker baserat på objekt. Jag bestämde mig för namnet oCanvas som en sammandragning av "objekt kanvas".
För att börja använda oCanvas måste vi inkludera en kopia av biblioteket på vår HTML-sida. Vi kan antingen referera till den CDN-värdfilen eller vara värd en lokal kopia oss själva. Hoppa över på oCanvas webbplats och du kan antingen hämta en kopia av biblioteket eller ta referensen till den CDN-värdversionen. Den nuvarande versionen är 2.0 och släpptes bara för några veckor sedan, som tog upp många av de fel som fanns i den ursprungliga utgåvan. På webbplatsen finns en miniverad produktionsversion, som är bra att använda när du är redo att distribuera ditt projekt. Det finns också en utvecklingsversion, som är okomprimerad men bättre för debugging. Jag gillar att länka direkt till den värdversionen för att ladda ner och cache snabbare av webbläsaren.
Efter att du har hänvisat till oCanvas, måste vi sedan konfigurera ett dukelement i vår HTML-kod och skapa en referens till den för användning i vår Javascript.
Som alltid, om du placerar ditt manus ovanför dukelementet, måste du lägga det i en funktion så att du vet att DOM är klar. Det finns ett par sätt att gå här. Du kan antingen skapa din egen funktion och sedan ringa den i ditt kroppselement när den laddas, så här:
funktion Huvud () // din oCanvas-kod
Eller du kan pakka in din kod inom oCanvas inbyggda domReady () metod. Detta motsvarar jQuery s $ (Dokument) .ready (). I oCanvas använder vi detta:
oCanvas.domReady (funktion () // Din kod här);
Notera: Du kan använda jQuery s $ (Dokument) .ready () metod om du ville.
Denna kod är absolut nödvändig och är det första du måste skriva när du använder oCanvas.
var kanvas = oCanvas.create (kanfas: "#canvas", bakgrund: "# 0cc", fps: 60);
I den här koden lagras en referens till dukelementet i vårt dokument och får du tillgång till kärninstansen, vilket gör att du kan börja skapa objekt. De skapa() Metoden tar ett objekt som sitt argument som styr hur oCanvas ska fungera. Det finns många egenskaper att passera in i skapa() metod, men den enda obligatoriska är egenskapen duk: en CSS-väljare som måste peka på ett dukelement i DOM.
De andra egenskaperna som passeras i ovanstående kod är bakgrunds- och fps-egenskaperna. Bakgrundsegenskapen låter dig applicera en bakgrund till duken, som kan vara CSS-färgvärden, gradienter och bilder. Om det utelämnas kan duken vara transparent. FPS-egenskapen anger antal bilder per sekund vilken animation som helst körs. Standardvärdet är 30 bilder per sekund.
Notera: Medan vi överblickar många av funktionerna i oCanvas rekommenderar jag att du kolla bibliotekets dokumentation för att få bättre förståelse för varje avsnitt.
Det finns många typer av visningsobjekt du kan skapa med oCanvas. Du kan skapa former som rektanglar, ellipser, polygoner och linjer tillsammans med bilder, text och även spritark. För att skapa ett nytt visningsobjekt använder vi oCanvas displaymodul och anger vilken typ av visningsobjekt vi vill skapa såväl som några grundläggande egenskaper - som så:
var box = canvas.display.rectangle (x: 50, y: 150, bredd: 50, höjd: 50, fyll: "# 000");
Sedan lägger vi till det på skärmen kallar vi en välkänd metod för dig Flash-utvecklare ...
Ja en gammal men en godis, vilket gör att oCanvas tillfogar objekt som är en välbekant process. Så för att lägga till vår låda till duken, skulle vi skriva:
canvas.addChild (fält);
Precis som i ActionScript, addChild () lägger till det angivna objektet som ett barn för den som ringer. Och i sin tur kommer barnets x och y att vara i förhållande till sin förälder. Så i detta fall gör vi boxen ett barn av duken, som vi kunde förenkla så här:
box.add ();
De Lägg till() Metoden lägger också till objektet på duken - vilket är verkligen samma sak som canvas.addChild (box). Men addChild () är mest användbar för att lägga till ett objekt som barn till ett redan skapat visningsobjekt, som:
var square = canvas.display.rectangle (x: 0, y: 0, bredd: 10, höjd: 10, fyll: "# 990000"); box.addChild (kvadrat);
Låt oss ta en titt på några av de olika typerna av visningsobjekt som du kan skapa i oCanvas.
Du har redan sett en fyrkant, men vi kan använda rektangel visa objekt för att skapa en hel del saker. Här är en rektangel med en blå stroke:
var rektangel = canvas.display.rectangle (x: 500, y: 100, bredd: 100, höjd: 200, fyll: "# 000", stroke: "utanför 2px blå");
De fylla egendom kan ta en giltig CSS-färg, tillsammans med CSS-gradienter och jämn bildmönster.
För att skapa en ellips skulle vi skriva:
var ellipse = canvas.display.ellipse (x: 100, y: 100, radie_x: 20, radie_y: 30, fyll: "rgba (255, 0, 0, 0,5)");
Om du vill ha en hel cirkel, ersätt bara radius_x och radius_y egenskaper med en singel radie fast egendom.
Att skapa någon form av regelbunden polygon är lika lätt - allt du behöver göra är att ange antal sidor och den radie du vill ha din form på. För att skapa en triangel:
var triangel = kanvas.display.polygon (x: 320, y: 145, sidor: 3, radie: 50, fyll: "# 406618");
Vad sägs om en femkant?
var pentagon = canvas.display.polygon (x: 200, y: 50, sidor: 5, rotation: 270, radie: 40, fyll: "# 790000");
För att uppnå det med HTML5-kanvas API måste du rita en massa vägar och försöka ta reda på vilka x och y positioner som ska anslutas till dem på. Jag försökte rita en oktagon för jämförelse skull men som du kan se nedan gav jag mig ganska enkelt. Inte riktigt säker på vad detta ska vara.
Accentsconagua
var kanvas = $ ("# 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 (); Att skapa visningsobjekt med bilder blir inte enklare än i oCanvas. Ange bara en x- och y-position och sökvägen till bildfilen:
var tree = canvas.display.image (x: 100, y: 350, bild: "tree.png");
En trevlig egenskap hos bildvisningsobjektet är bricka egendom, som gör att du enkelt kan skapa ett rutnät med samma bild istället för att dra det om och om igen.
oCanvas innehåller ett textvisningsobjekt och hanterar typsnittsstyckning precis som CSS gör.
var text = canvas.display.text (x: 70, y: 300, justera: "center", typsnitt: "fet 18px sans-serif", text: "oCanvas Rocks", fyll: "lila");
Du kan använda många av de andra textegenskaperna du känner till från CSS. Kolla in dokumentationen på text för mer.
Alla visningsobjekt har en gemensam grupp av egenskaper och metoder. Några av de vanligaste egenskaperna för visningsobjekt är: x, y, bredd, höjd, rotation, scalingX, scalingy, opacitet, skugga (använder CSS-Box-Shadow Syntax) och zIndex. Du kan kolla in den här länken för en fullständig lista över basegenskaperna och metoderna. Låt oss ta en titt på några andra anmärkningsvärda.
Denna metod är en stor tidsbesparare eftersom det låter dig enkelt ställa in ursprunget i objektet. Med andra ord kan du ställa in objektets registreringspunkt. Om du någonsin försökt att utföra en rotation från centrum med HTML5 Canvas API, vet du hur stor en huvudvärk det kan vara. Du måste göra en rad åtgärder för att spara ritningstillståndet, översätta duken, utföra din rotation och återställa ritningstillståndet. Med ursprung egendom du enkelt kan definiera ett objekts ursprung:
var obj = canvas.display.image (x: 270, y: 270, ursprung: x: "center", y: "center"));
Detta skulle rita bilden från dess centrum; Om vi skulle rotera objektet skulle det också rotera från dess centrum. Förutom "center" kan du också passera "left" eller "right" för x och "top" eller "bottom" för y-positionerna. Förutom att använda de fördefinierade sökorden kan du också leverera positiva eller negativa tal som värden på var du ska dra objektet. Standardvärdet för alla visningsobjekt definieras längst upp till vänster.
Du kan också använda setOrigin () metod när som helst för att definiera ett objekts ursprung:
obj.setOrigin ("left", "bottom") Ett visningsobjekts id, som egentligen är en skrivskyddad egenskap, motsvarar var objektet existerar i teckningslistan - vilket du kan tänka dig som visningslista. Jag tycker att den är mycket användbar eftersom den kan fungera som en unik identifierare i vissa situationer när du kan söka ett specifikt objekt i din kod. Tänk på ett grundläggande utdrag så här:
getId (box.id) funktion getId (id) if (id == 9) console.log ("CORRECT!" + id) annars console.log ("WRONG!" + id) Sammansättningsegenskapen är ekvivalent av globalCompositeOperation inom det inhemska Canvas API. Om du inte är bekant med det, bestämmer det i grunden hur pixlar görs när de dras på redan befintliga pixlar på duken. Jag uppmanar dig att läsa igenom de olika kompositionsoperationerna du kan ställa in, men med oCanvas kan du enkelt ställa in den operation du vill ha genom att överföra den som en sträng:
var form = canvas.display.rectangle (x: 270, y: 270, bredd: 180, höjd: 80, fyll: "# ff6900", komposition: "destination-atop");
Det finns många olika operationer du kan passera in men jag tror att en av de snygga sakerna du kan göra med kompositionens egenskap är att skapa masker mellan olika visningsobjekt. Kolla in filen som heter masks.html i nedladdningspaketet. Om du någonsin har åberopat att skapa lagmasker i dina Flash-applikationer, kommer du att njuta av den här.
Eftersom vi tidigare nämnde roterande objekt kan du snabbt rotera ett objekt med rotera() och rotateTo () metoder:
obj.rotate (45);
Du kan också enkelt ställa in rotationsegenskapen:
obj.rotation = 45;
Det finns också flytta() och flytta till() metoder som, som deras namn föreslår, låter dig flytta ett objekt med en viss mängd pixlar för den tidigare och toa specificerade x och y-positionen för den senare.
obj.moveTo (100, 100)
Samma idé fungerar för skala() och scaleTo () metoder ():
obj.scale (1,25, 0,25) obj.scaleTo (1,5, 1,5)
Vi nämnde addChild () innan; låt oss inte glömma removeChild () och removeChildAt (). Och som Lägg till() metod kan vi göra det motsatta med ta bort().
En annan riktigt användbar metod är klona(), som låter dig kopiera ett visningsobjekt och alla dess egenskaper.
var box = canvas.display.rectangle (x: 50, y: 150, bredd: 50, höjd: 50, fyll: "# 000"); var box2 = box.clone (x: 200)
Ett stort plus till oCanvas är att du kan lägga till händelser till specifika objekt. OCanvas innehåller många metoder och egenskaper för att enkelt hantera mus, tangentbord och till och med beröra händelser alla med en enkel metod.
Om du är bekant med jQuery, vet du förmodligen redan vart jag går med det här.
canvas.bind ("klicka på knappen", funktionen () canvas.background.set ("# efefef");); Allt detta gör att du ändrar bakgrundsfärgen på duken, men märker hur vi passerar i "klicka på" - så att vi kan lägga till stöd för både mus och beröringsenheter.
Förutom att klicka på händelser kan du också lyssna på andra mushändelser:mousedown, mouseup, mousemove, mouseenter, mouseleave och dblclick.
En enkel rullande effekt kan se ut så här:
box.bind ("mouseenter", funktion () canvas.background.set ("# 333");) bind ("mouseleave", funktion () canvas.background.set ("# 000"); ); Detta är ett exempel på kedjningsfunktioner - vilket (för att inte låta som en trasig plåt) är en annan jQuery-funktion som utnyttjas i oCanvas.
Men istället för att ändra på duken när en mushändelse inträffar, vad sägs om att ändra ett verkligt visningsobjekt? Det här är fortfarande HTML5 Canvas, så vi måste komma ihåg att ringa en viktig metod för att berätta för duken att uppdatera sig själv.
De rita om() Metod (som faktiskt ingår i Draw Module, inte händelsemodulen) omdirigerar duken med alla visningsobjekt som har lagts till. Så om du vill utföra en åtgärd på ett visst objekt och få resten av teckningslistan att vara intakt, måste vi lägga till den här enkla kodkoden till våra funktioner:
square.bind ("klicka på knappen", funktionen () square.x + = 50; canvas.redraw ();); Vilken bra är en händelselyssnare om vi inte kan ta bort det?
rektangel.bind ("klicka på knappen", funktionen påClick () this.fill = "# FF9933"; canvas.redraw (); rektangel.unbind ("klicka på knappen", onClick)); Vi behöver inte binda() metod för den här. Vi skriver bara:
circle.dragAndDrop ();
Det är förmodligen den snabbaste och enklaste dra och släppkoden du någonsin skriver.
Obs på händelser: När du arbetar med händelser är det naturligt att du vill få så mycket information som möjligt om evenemanget. Lyckligtvis kan vi fortfarande göra det när vi arbetar med oCanvas. Till exempel om vi tar klickhanteraren några rader upp och loggar händelsen till konsolen kan vi se alla egenskaper vi har från evenemanget.
rektangel.bind ("klicka på", klicka på), console.log (e); ); 
Förutom mushändelser har oCanvas hela moduler avsedda för tangentbord och touch-händelser med sina egna unika metoder och egenskaper. Dessa händelser hanteras också med binda() metod. Händelsessystemet i oCanvas är ett mycket brett ämne, så jag uppmanar att ta en titt på händelsessektionen i dokumentationen och experimentera.
Med tidslinjemodulen kan vi ställa in vår huvudslinga för vår applikation. Om du skapade ett spel skulle det i huvudsak vara din spelslinga. Jag tycker om att tänka på det som motsvarande en ENTER_FRAME i Flash.
Det är enkelt att sätta upp - vi kallar bara setLoop funktion och kedja Start() metod för det:
canvas.setLoop (funktion () triangle.rotation + = 5;). start ();
Om vi ville knyta setLoop () funktion till en händelse - säg till ett musklick - vi kan göra något så här:
canvas.setLoop (funktion () triangle.rotation + = 5;) button.bind ("klicka på knappen", funktionen () canvas.timeline.start ()); Och vi kunde sluta tidslinjen genom att bara ringa:
canvas.timeline.stop ();
Använder sig av setLoop () är vägen att gå för animeringar som kommer att inträffa under en lång tid och att hantera ständiga uppdateringar du måste göra under hela din ansökan. Men oCanvas har byggt in metoder för att hantera enklare och grundläggande animeringar som vanligtvis behövs. Dessa metoder är också praktiskt taget ordatima från jQuery.
De animera() Metoden fungerar precis som det gör i jQuery. Om du inte är bekant med den här sidan av jQuery, tänk om det gillar en tweening-motor som TweenMax eller Tweener for Flash. Du kan animera alla egenskaper som kan ställas in med ett numeriskt värde:
circle.animate (y: circle.y - 300, scalingX: .5, scalingY: .5, "short", "ease-in", funktion () circle.fill = "# 45931e"; canvas.redraw (););
Här animerar vi cirkelens y-position och övergripande storlek, tillämpar lite lättnad, och när det är klart kör vi en återuppringningsfunktion som ändrar fyllfärgen. Men glöm inte att ringa rita om().
FadeIn (), tona ut(), och fadeTo () Att blekna ett föremål in och ut kunde vi bara ringa:
square.fadeIn (); square.fadeOut ();
Att försvaga opaciteten till ett visst värde, vi skulle använda fadeTo ():
square.fadeTo (0,6);
Du kan också definiera varaktighet, lättnad och ge en återuppringningsfunktion för dessa metoder på samma sätt som du skulle med animera() metod.
oCanvas innehåller en mycket användbar scenmodul som låter dig enkelt separera din ansökan i olika stater. Spelutvecklare kan uppskatta detta eftersom det är ett enkelt sätt att bryta ner ditt spel i olika sektioner. Även gamla skolans Flash-animatörer kan likna scenmodulen till scenpanelen, vilket gör att du bokstavligen kan skapa olika scener inom ett Flash-projekt.
För att skapa en scen i oCanvas ringer vi på skapa() Metod att returnera a scener objekt:
var intro = canvas.scenes.create ("intro", funktion () // lägg till visningsobjekt här); Inom skapa() metod vi passerar i två argument: namnet på scenen som en sträng och en funktion där vi lägger till det visningsobjekt vi vill lägga till den scenen.
var introText = canvas.display.text (x: canvas.width / 2, y: canvas.height / 2, justera: "center", typsnitt: "fet 36px sans-serif", text: "Introduktion" "# 133035"); var intro = canvas.scenes.create ("intro", funktion () this.add (introText);); Nu måste vi ladda vår scen och dessa objekt kommer att läggas till i teckenfönstret:
canvas.scenes.load ( "intro");
Observera att vi passerar i namnet vi gav scenen när vi skapade den.
Och naturligtvis kan vi lossa en scen när som helst:
canvas.scenes.unload ( "intro");
Föreställ dig hur mycket av en tidsbesparare det kan vara om du använde scener och händelsehanterare tillsammans.
Den enda verkliga nackdelen med oCanvas är att den inte har fått så mycket dragkraft i utvecklingssamhället som du kanske skulle gissa - eller åtminstone verkar det så långt för nu. En del av den anledningen till detta tror jag är på grund av EaselJS popularitet. Det verkar finnas mycket mer medvetenhet och resurser ute för EaselJS än det finns för oCanvas - vilket är svårt att tro sedan det senare släpptes för första gången i mars 2011, men av någon anledning har det flugit under radarn.
Jag har använt båda biblioteken ganska länge nu, och jag kan ärligt säga att jag är stor fan av båda. EaselJS känns definitivt mer som att du använder ActionScript och om du är en Flash-utvecklare blir det lätt att hämta. Och som vi har sett kan oCanvas passera på jQuerys förlorade bror på många sätt. Så om du är en ren ActionScripter, kan du bara naturligt gravit mot EaselJS - speciellt eftersom Easel skrivits speciellt för att vädja till Flash-utvecklare.
Jag har dock använt Actionscript mycket längre än jQuery och jag tycker personligen att oCanvas är enklare att använda och mindre ordentlig att skriva. Och även om EaselJS är ganska lätt att använda sig, gör den enkla syntaxen i oCanvas det bara ett välkommet verktyg.
Men förutom den enklare syntaxen kan oCanvas och EaselJS på många sätt vara ganska utbytbara. Båda biblioteken kan utföra mer eller mindre samma uppgifter och det finns väldigt liten skillnad i prestanda, om det finns några. Jag märker dock att Ticker-funktionen i EaselJS går lite smidigare än oCanvas ' setLoop funktion (men det kan bara vara en webbläsarbaserad skillnad).
EaselJS har mycket mer av ett omfattande API - särskilt när det gäller teckning och effekter. Och om du tar hänsyn till TweenJS och SoundJS är Easel definitivt ett mer komplett verktyg - speciellt om du brukar använda en applikation som Flash som erbjuder finjustering av dina projekt. Men om du är ny på hela HTML5-spelet, kommer du sannolikt att träffa marken som körs med oCanvas mycket snabbare. När jag först introducerades till oCanvas, tyckte jag att det var så roligt att leka med. Allt är redan där för dig - alla nödvändiga metoder och händelser att börja skapa, manipulera och animera objekt direkt.
Oavsett vilket bibliotek du föredrar, oCanvas och EaselJS är bara början på det jag tror kommer att vara ett tillflöde av verktyg och resurser för att ge utvecklare lätt att skapa webbaserade applikationer. Funktionerna i oCanvas som beskrivs i den här artikeln skrapar knappt ytan på vad som kan skapas med hjälp av detta mycket kraftfulla bibliotek.
På något sätt är dock oCanvas (eller något bibliotek för den delen) en anledning att inte lära sig och använda det inbyggda HTML5 Canvas API. Men om du befinner dig i en situation där alla dina tidigare Flash-klienter nu letar efter dig att skapa HTML5-appar (som min var) och du inte har tid att lära dig något som den ovänliga transformationsmatrisen i det inbyggda Canvas API-oCanvas kan definitivt underlätta inlärningskurvan.
