Share
Med advent av verktøy som Adobe Edge og biblioteker som EaselJS, blir flere ressurser tilgjengelige for utviklere som ønsker å lage interaktivt HTML5-innhold. Mange av disse verktøyene er rettet spesielt for Flash-utviklere for å gjøre overgangen fra ActionScript til HTML5 lerret en jevn. Denne artikkelen vil overse oCanvas, et HTML5-bibliotek som utviklere ikke bare finner uvurderlig, men også veldig enkelt å bruke.
Før vi dykker inn i å utforske oCanvas, la oss raskt sette scenen for hvordan HTML5 lerret fungerer. Hvis du vil ha en grundigere forklaring på hvordan du bruker HTML5 lerret, sjekk ut denne veiledningen.
Hvis du kjenner ActionScript, vet du allerede mye JavaScript, det er der den virkelige kraften ligger når du arbeider med lerret. Vi bruker HTML5 tegning API for å lage vårt innhold sammen med noen gode ol 'JavaScript for å gjøre ting interaktive og dynamiske. Men når vi kombinerer de to, er tilnærmingen bak hvordan vi går om å sette sammen koden vår, litt annerledes enn hva vi er vant til med ActionScript.
Kort sagt, for å bruke den innfødte Canvas API, tegner vi piksler på tegningens kontekst av lerretet. Men den viktigste tingen å huske er at vi jobber med hele lerretet, ikke bare en enkelt form eller et bilde som vi har tegnet. Hver gang vi vil endre noe vi har tegnet, må vi redraw hele lerretet. Hvis vi ønsker å animere noe, må vi omdanne lerretet om og om igjen i JavaScript for å få det til å se at ting er i bevegelse.
Dette forestillingen ligner veldig på tradisjonell animasjon, hvor animatører måtte tegne hver eneste pose i sin rekkefølge og få kameraet til å bevege seg gjennom dem veldig raskt for å simulere bevegelse. Men hvis du er vant til trelignende strukturer som DOM, eller visningslisten i Actionscript, kan dette begrepet være vanskelig å få hodet rundt. Denne skylling og repeterende tilnærming til programmering er mye annerledes enn å jobbe med objekter for de fleste utviklere.
Heldigvis for de av oss som er så vant til å jobbe med objekter, bringer oCanvas den kjente tilnærmingen til HTML5 lerret. oCanvas er et JavaScript-bibliotek utviklet av Johannes Koggdal med det formål å gjøre det enklere å utvikle med HTML5 lerret. Det gjør at du kan jobbe direkte med objekter, endre egenskaper og hekte hendelser til dem alle mens du håndterer den nitty-gritty bak kulissene ting for deg. Som sagt best av Johannes på bloggen hans:
Målet mitt har alltid vært å gjøre det veldig enkelt for folk å bygge lerret ting basert på objekter. Jeg bestemte meg for navnet oCanvas som en sammentrekning av "objekt lerret".
For å begynne å bruke oCanvas må vi ta med en kopi av biblioteket på vår HTML-side. Vi kan enten referere til CDN-vert-filen, eller hoste en lokal kopi oss selv. Hopp over til oCanvas-nettstedet, og du kan enten laste ned en kopi av biblioteket eller hente referansen til CDN-vert versjon. Den nåværende versjonen er 2.0 og ble utgitt bare noen uker siden, som adresserte mange av de feilene som var i den første utgivelsen. På nettstedet er det en minifisert produksjonsversjon, som er god å bruke når du er klar til å distribuere prosjektet. Det er også en utviklingsversjon, som er ukomprimert, men bedre for feilsøking. Jeg liker å koble direkte til vertsversjonen for raskere lasting og caching av nettleseren.
Etter at du har gjort en referanse til oCanvas, må vi først sette opp et lerretelement i kroppen til HTML-en og lage en referanse til den for bruk i Javascript.
Som alltid, hvis du plasserer skriptet over lerretelementet, må du pakke det inn i en funksjon slik at du vet at DOM er klar. Det er et par måter å gå her. Du kan enten lage din egen funksjon og deretter ringe den i kroppen din når den laster, slik:
funksjon Hoved () // din oCanvas-kode
Eller du kan pakke inn koden din i oCanvas's innebygde domReady () metode. Dette er ekvivalent med jQuery's $ (Document) .ready (). I oCanvas bruker vi dette:
oCanvas.domReady (funksjon () // Din kode her);
Merk: Du kan bruke jQuery's $ (Document) .ready () metode hvis du ville.
Dette koden er absolutt nødvendig, og er det første du må skrive når du bruker oCanvas.
var lerret = oCanvas.create (lerret: "#canvas", bakgrunn: "# 0cc", fps: 60);
I denne koden lagrer vi en referanse til lerretelementet i dokumentet vårt og får tilgang til kjernefasen, som gjør at du kan begynne å lage objekter. De skape() Metoden tar et objekt som et argument som styrer hvordan oCanvas vil fungere. Det er mange egenskaper å passere inn i skape() metode, men den eneste obligatoriske er lærredegenskapen: en CSS-velg som må peke på et lerretelement i DOM.
De andre egenskapene som passerer i koden ovenfor, er bakgrunns- og fps-egenskapene. Bakgrunnsegenskapen lar deg bruke en bakgrunn til lerretet, som kan være CSS-fargeværdier, gradienter og bilder. Hvis det er utelatt, vil lerretet være gjennomsiktig. FPS-egenskapen angir antall bilder per sekund, hvilken animasjon som helst vil kjøre på. Standardinnstillingen er 30 fps.
Merk: Mens vi oversetter mange av funksjonene i oCanvas, anbefaler jeg å sjekke bibliotekets dokumentasjon for å få bedre forståelse av hver seksjon.
Det finnes mange typer skjermobjekter du kan opprette med oCanvas. Du kan lage former som rektangler, ellipser, polygoner og linjer sammen med bilder, tekst og til og med spritark. For å opprette et nytt visningsobjekt bruker vi oCanvas displaymodul, og spesifiser hvilken type skjermobjekt vi vil opprette, så vel som noen grunnleggende egenskaper - slik som:
var boks = canvas.display.rectangle (x: 50, y: 150, bredde: 50, høyde: 50, fyll: "# 000");
Så å legge den til skjermen kaller vi en kjent metode for deg Flash-utviklere ...
Ja en oldie, men en godbit, noe som gjør det mulig å legge objekter til oCanvas en kjent prosess. Så for å legge til boksen vår på lerretet, ville vi skrive:
canvas.addChild (boks);
Akkurat som i ActionScript, addChild () legger til det angitte objektet som et barn av den som ringer. Og i sin tur vil barnets x og y være i forhold til foreldrene. Så i dette tilfellet lager vi boks et barn av lerretet, som vi kunne forenkle slik:
box.add ();
De Legg til() Metoden legger også objektet til lerretet - som egentlig er det samme som canvas.addChild (boks). Men addChild () er mest nyttig for å legge til et objekt som barn til et allerede opprettet visningsobjekt som:
var square = canvas.display.rectangle (x: 0, y: 0, bredde: 10, høyde: 10, fyll: "# 990000"); box.addChild (firkant);
La oss ta en titt på noen av de forskjellige typer skjermobjekter du kan opprette i oCanvas.
Du har allerede sett en firkant, men vi kan bruke rektangel vis objekt for å lage mange ting. Her er et rektangel med et blått slag:
var rektangel = canvas.display.rectangle (x: 500, y: 100, bredde: 100, høyde: 200, fyll: "# 000", slag: "utenfor 2px blå");
De fylle Egenskapen kan ta en gyldig CSS-farge, sammen med CSS-gradienter og jevne bilde mønstre.
For å lage en ellipse ville vi skrive:
var ellipse = canvas.display.ellipse (x: 100, y: 100, radius_x: 20, radius_y: 30, fyll: "rgba (255, 0, 0, 0,5)");
Hvis du vil ha en full sirkel, skal du bare erstatte radius_x og radius_y egenskaper med en singel radius eiendom.
Å lage noen form for regelmessig polygon er like enkelt - alt du trenger å gjøre er å spesifisere antall sider og radiusen du vil ha på figuren din. Slik lager du en trekant:
var trekant = lerret.display.polygon (x: 320, y: 145, sider: 3, radius: 50, fyll: "# 406618");
Hva med en femkant?
var pentagon = canvas.display.polygon (x: 200, y: 50, sider: 5, rotasjon: 270, radius: 40, fyll: "# 790000");
For å oppnå det med HTML5 lerret API, må du tegne en rekke stier og prøve å finne ut hva x og y stillinger å bli med på. Jeg forsøkte å tegne en ottekant for sammenligningens skyld, men som du kan se nedenfor, ga jeg opp ganske enkelt. Ikke helt sikker på hva dette skal være.
Accentsconagua
var lerret = $ ("# lerret"); 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 (); Å lage visningsobjekter med bilder blir ikke enklere enn i oCanvas. Bare spesifiser en x- og y-posisjon og banen til bildefilen:
var tree = canvas.display.image (x: 100, y: 350, bilde: "tree.png");
En fin funksjon i bildevisningen objektet er flis eiendom, som lar deg enkelt lage et rutenett med samme bilde i stedet for å tegne det om og om igjen.
oCanvas inneholder et tekstdisplayobjekt og håndterer skriftstile, akkurat som CSS gjør.
var text = canvas.display.text (x: 70, y: 300, juster: "sentrum", skrifttype: "fet 18px sans-serif", tekst: "oCanvas Rocks", fyll: "purple");
Du kan bruke mange av de andre tekstegenskapene du er kjent med fra CSS. Sjekk ut dokumentasjonen på tekst for mer.
Alle visningsobjekter arver en felles gruppe av egenskaper og metoder. Noen av de vanligste egenskapene for skjermobjektet er: x, y, bredde, høyde, rotasjon, scalingX, scalingy, opacity, skygge (bruker CSS-boks-skygge syntaks) og zIndex. Du kan sjekke ut denne lenken for en fullstendig liste over basisegenskapene og metodene. La oss ta en titt på noen andre bemerkelsesverdige.
Denne metoden er en stor tidsbesparende fordi det lar oss enkelt sette opp opprinnelsen i objektet. Med andre ord kan du angi objektets registreringspunkt. Hvis du noen gang har prøvd å utføre en rotasjon fra sentrum med HTML5 Canvas API, vet du hvor stor en hodepine det kan være. Du må gjøre en rekke handlinger for å lagre tegningstilstanden, oversette lerretet, utføre rotasjonen og deretter gjenopprette tegningstilstanden. Med opprinnelse eiendom du enkelt kan definere et objekts opprinnelse:
var obj = canvas.display.image (x: 270, y: 270, opprinnelse: x: "senter", y: "senter"));
Dette ville tegne bildet fra sentrum; Hvis vi skulle rotere objektet, ville det også rotere fra sentrum. Foruten "senter" kan du også passere "venstre" eller "høyre" for x og "topp" eller "bunn" for y-posisjonene. I tillegg til å bruke de forhåndsdefinerte søkeordene, kan du også levere positive eller negative tall som verdier av hvor du skal tegne objektet. Standard opprinnelse for alle visningsobjekter er definert øverst til venstre.
Du kan også bruke setOrigin () metode når som helst for å definere et objekts opprinnelse:
obj.setOrigin ("left", "bottom") Et visningsobjekts id, som egentlig er en skrivebeskyttet eiendom, tilsvarer hvor objektet finnes i tegnelisten - som du kan tenke på som visningslisten. Jeg synes det er veldig nyttig fordi det kan fungere som en unik identifikator i visse situasjoner når du kan søke etter et bestemt objekt i koden din. Vurder en grunnleggende kode som denne:
getId (box.id) funksjon getId (id) hvis (id == 9) console.log ("CORRECT!" + id) ellers console.log ("WRONG!" + id) Sammensetningsegenskapen er ekvivalent av globalCompositeOperation innenfor den innfødte lærred-APIen. Hvis du ikke er kjent med det, bestemmer det i utgangspunktet hvordan piksler gjengis når de trekkes på allerede eksisterende piksler på lerretet. Jeg oppfordrer deg til å lese opp de forskjellige komposittoperasjonene du kan angi, men med oCanvas kan du enkelt angi operasjonen du vil ha ved å sende den som en streng:
var form = canvas.display.rectangle (x: 270, y: 270, bredde: 180, høyde: 80, fyll: "# ff6900", sammensetning: "destinasjon-topp");
Det er mange forskjellige operasjoner du kan passere inn, men jeg tror at en av de fine ting du kan gjøre med komposjonsegenskapen, er å lage masker mellom forskjellige skjermobjekter. Sjekk ut filen som heter masks.html i nedlastingspakken. Hvis du noen gang stolte på å lage lagmasker i Flash-programmene dine, vil du nyte denne.
Siden vi nevnte roterende objekter tidligere, kan du raskt rotere en gjenstand med rotere() og rotateTo () metoder:
obj.rotate (45);
Du kan også ganske enkelt sette rotasjonsegenskapen:
obj.rotation = 45;
Det er også bevege seg() og flytte til() metoder som, som deres navn antyder, lar deg flytte et objekt med en spesifisert mengde piksler for den tidligere og toa angitte x og y posisjon for sistnevnte.
obj.moveTo (100, 100)
Den samme ideen fungerer for skala () og scaleTo () metoder ():
obj.scale (1,25, 0,25) obj.scaleTo (1,5, 1,5)
Vi nevnte addChild () før; la oss ikke glemme det removeChild () og removeChildAt (). Og som Legg til() metode, kan vi gjøre det motsatte med fjerne().
En annen veldig nyttig metode er klone (), som lar deg duplisere et visningsobjekt og alle dets egenskaper.
var boks = canvas.display.rectangle (x: 50, y: 150, bredde: 50, høyde: 50, fyll: "# 000"); var box2 = box.clone (x: 200)
Et stort pluss til oCanvas er at du kan legge til hendelser til bestemte objekter. OCanvas inneholder mange metoder og egenskaper for å enkelt håndtere mus, tastatur og til og med berøre hendelser alle med en enkel metode.
Hvis du er kjent med jQuery, vet du sannsynligvis allerede hvor jeg skal med dette.
canvas.bind ("klikk trykk", funksjon () canvas.background.set ("# efefef");); Alt dette gjør, er å endre bakgrunnsfargen på lerretet, men legg merke til hvordan vi passerer inn i "klikk trykk" - slik at vi kan legge til støtte for både mus og berøringsenheter.
I tillegg til klikkhendelser kan du også lytte etter andre museventilhendelser:mousedown, mouseup, mousemove, mouseenter, mouseleave og DblClick.
En enkel overgangseffekt kan se slik ut:
box.bind ("mouseenter", funksjon () canvas.background.set ("# 333");) bind ("mouseleave", funksjon () canvas.background.set ("# 000"); ); Dette er et eksempel på kjettingfunksjoner - hvilket (ikke å høres ut som en ødelagt plate) er en annen jQuery-funksjon som brukes i oCanvas.
Men i stedet for å endre lerretet når det oppstår en mushendelse, hva med å endre et faktisk displayobjekt? Dette er fortsatt HTML5 Canvas, så vi må huske å ringe en viktig metode for å fortelle lerretet å oppdatere seg selv.
De tegne () metode (som faktisk er en del av Draw Module, ikke hendelsesmodulen) omdanner lerretet med alle de skjermobjektene som er lagt til. Så hvis du vil utføre en handling på en bestemt gjenstand og ha resten av tegningslisten, vær intakt, må vi legge til denne enkle koden til våre funksjoner:
square.bind ("klikk trykk", funksjon () square.x + = 50; canvas.redraw ();); Hvilken god er en hendelseslytter, hvis vi ikke kan fjerne den?
rectangle.bind ("klikk trykk", funksjon onClick () this.fill = "# FF9933"; canvas.redraw (); rectangle.unbind ("klikk trykk", onClick)); Vi trenger ikke binde() metode for denne. Vi skriver bare:
circle.dragAndDrop ();
Det er trolig den raskeste og enkleste dra og slippkoden du noensinne vil skrive.
Merk på hendelser: Når du jobber med hendelser, er det naturlig å få så mye informasjon som mulig om arrangementet. Heldigvis kan vi fortsatt gjøre det når vi jobber med oCanvas. For eksempel hvis vi tar klikkbehandleren noen linjer opp og logger hendelsen til konsollen, kan vi se alle egenskapene vi har fra arrangementet.
rektangel.bind ("klikk på", onClick); console.log (e); ); 
I tillegg til mushendelser har oCanvas hele moduler dedikert til tastatur og berøringshendelser med sine egne unike metoder og egenskaper. Disse hendelsene håndteres også med binde() metode. Hendelsessystemet i oCanvas er et svært bredt tema, så jeg anbefaler at du tar en titt på hendelsesdelen i dokumentasjonen og eksperimenterer.
Med Tidslinjemodulen kan vi sette opp hovedsløyfen for applikasjonen vår. Hvis du lager et spill, vil dette i hovedsak være din spillsløyfe. Jeg liker å tenke på det som ekvivalent av en ENTER_FRAME i Flash.
Det er enkelt å sette opp - vi kaller bare setLoop funksjon og kjede start() metode til det:
canvas.setLoop (funksjon () triangle.rotation + = 5;). start ();
Hvis vi ønsket å knytte setLoop () funksjon til en hendelse - si til et museklikk - vi kunne gjøre noe slikt:
canvas.setLoop (funksjon () triangle.rotation + = 5;) button.bind ("klikk trykk", funksjon () canvas.timeline.start ()); Og vi kunne stoppe tidslinjen ved å bare ringe:
canvas.timeline.stop ();
Ved hjelp av setLoop () er veien å gå for animasjoner som vil skje over en lengre periode og å takle konstante oppdateringer du må gjøre gjennom hele søknaden din. Men oCanvas har innebygd metoder for å håndtere enklere og grunnleggende animasjoner som trengs. Disse metodene blir også praktisk tatt ordentlig fra jQuery.
De animere () Metoden fungerer akkurat som det gjør i jQuery. Hvis du ikke er kjent med denne siden av jQuery, tenk om det er en tweening-motor som TweenMax eller Tweener for Flash. Du kan animere hvilken som helst egenskap som kan settes med en numerisk verdi:
circle.animate (y: circle.y - 300, scalingX: .5, scalingY: .5, "short", "ease-in", funksjon () circle.fill = "# 45931e"; canvas.redraw (););
Her animerer vi sirkelens y-posisjon og overordnet størrelse, bruker litt lettelse, og når den er ferdig, kjører vi en tilbakeringingsfunksjon som endrer fyllfarge. Men ikke glem å ringe tegne ().
fadeIn (), fadeout (), og fadeTo () For å fade et objekt inn og ut, kunne vi bare ringe:
square.fadeIn (); square.fadeOut ();
For å fade opaciteten til en bestemt verdi, ville vi bruke fadeTo ():
square.fadeTo (0,6);
Du kan også definere varigheten, lette og gi tilbakekallingsfunksjonen for disse metodene på samme måte som du ville med animere () metode.
oCanvas inneholder en veldig nyttig scenemodul som lar deg enkelt skille applikasjonen din i forskjellige stater. Spillutviklere kan sette pris på dette fordi det er en enkel tilnærming til å bryte ned spillet ditt i forskjellige seksjoner. Selv gamle skolens Flash-animatorer kan likne scenemodulen til Scenes-panelet, som lar deg bokstavelig talt lage forskjellige scener i et Flash-prosjekt.
For å lage en scene i oCanvas vi kaller skape() metode for å returnere a scener gjenstand:
var intro = canvas.scenes.create ("intro", funksjon () // legg til visningsobjekter her); Innen skape() Metode vi passerer i to argumenter: navnet på scenen som en streng, og en funksjon der vi legger til visningsobjektet vi vil legge til den scenen.
var introText = canvas.display.text (x: canvas.width / 2, y: canvas.height / 2, juster: "center", font: "fet 36px sans-serif", tekst: "Introduksjon", fyll: "# 133035"); var intro = canvas.scenes.create ("intro", funksjon () this.add (introText);); Nå må vi laste inn vår scene, og disse objektene blir lagt til på skjermen:
canvas.scenes.load ( "intro");
Legg merke til at vi passerer i navnet vi ga scenen da vi opprettet den.
Og selvfølgelig kan vi løse en scene når som helst:
canvas.scenes.unload ( "intro");
Tenk deg hvor mye tidspareren dette kan være hvis du brukte scener og hendelseshåndterere sammen.
Den eneste virkelige ulempen med oCanvas er at den ikke har fått så mye trekkraft i utviklingssamfunnet som du kan gjette - eller i det minste virker det slik for nå. En del av den grunnen til dette, tror jeg, er på grunn av populariteten til EaselJS. Det ser ut til å være mye mer bevissthet og ressurser der ute for EaselJS enn det er for oCanvas - som er vanskelig å tro siden sistnevnte ble først utgitt i mars 2011, men av en eller annen grunn det har fløyet under radaren.
Jeg har brukt begge biblioteker for en stund nå, og jeg kan ærlig si at jeg er stor fan av begge. EaselJS føles definitivt mer som om du bruker ActionScript, og hvis du er en Flash-utvikler, blir det enkelt å plukke opp. Og som vi har sett, kunne oCanvas passere for jQuery sin fortabte bror på mange måter. Så hvis du er en ren ActionScripter, kan du bare naturligvis grave mot EaselJS - spesielt siden Easel ble skrevet spesielt for å appellere til Flash-utviklere.
Imidlertid har jeg brukt ActionScript mye lenger enn jQuery, og jeg personlig finner oCanvas enklere å bruke og mindre ordentlig å skrive. Og selv om EaselJS er ganske enkelt å bruke seg selv, gjør den enkle syntaksen i oCanvas det bare et godt verktøy.
Men i tillegg til den enklere syntaksen, er oCanvas og EaselJS på mange måter ganske mye utskiftbare. Begge biblioteker kan utføre mer eller mindre de samme oppgavene, og det er svært liten forskjell i ytelsen, om noen. Men jeg merker at Ticker-funksjonen i EaselJS går litt jevnere enn oCanvas ' setLoop funksjon (selv om det bare kunne være en nettleserbasert forskjell).
EaselJS har mye mer av en omfattende API - spesielt når det gjelder tegning og effekter. Og hvis du tar hensyn til TweenJS og SoundJS, er Easel definitivt et mer komplett verktøy - spesielt hvis du er vant til å bruke et program som Flash som gir finjusteringskontroll over prosjektene dine. Men hvis du er ny på hele HTML5-spillet, vil du sannsynligvis slå bakken med oCanvas mye raskere. Da jeg først ble introdusert til oCanvas, fant jeg det så gøy å leke med. Alt er allerede der for deg - alle nødvendige metoder og hendelser begynner å skape, manipulere og animere gjenstander med en gang.
Uansett hvilket bibliotek du foretrekker, oCanvas og EaselJS er bare begynnelsen på det jeg tror vil være en tilstrømning av verktøy og ressurser slik at utviklere enkelt kan lage nettleserbaserte applikasjoner. Funksjonene til oCanvas som er beskrevet i denne artikkelen, skraper bare overflaten av det som kan opprettes ved hjelp av dette svært kraftige biblioteket.
På ingen måte er oCanvas (eller noe bibliotek for den saks skyld) en grunn til ikke å lære og bruke den innfødte HTML5 Canvas API. Men hvis du befinner deg i en situasjon der alle dine tidligere Flash-klienter nå leter etter at du oppretter HTML5-programmer (som mine var), og du har ikke tid til å lære noe som den ufriendlige transformasjonsmatrisen i den innfødte Canvas API - oCanvas kan definitivt lette læringskurven.
