Ef þú hefur búið undir rokk undanfarin tvö ár er strigaþátturinn í HTML5 forskriftinni frekar einföld að skilja. Í grundvallaratriðum er það rétthyrnt svæði á síðunni þinni þar sem þú getur notað JavaScript til að teikna eitthvað sem þú velur.

Það er alveg bókstaflega stafrænn "striga" sem þú getur notað til að gera leik grafík, myndir, hreyfimyndir og aðrar sjónrænar myndir í flugu. Þetta útilokar í grundvallaratriðum þörfina fyrir aðrar tegundir af hreyfimyndum á netinu og grafíkum (eins og Flash) og er miklu meira samhæft á vettvangi og tækjum.

Vonandi vissirðu nú þegar allt þetta. Þó að grunnhugmyndin á bak við Canvas sé einföld, getur það virkilega verið flóknari að vinna með það. Svo hér eru nokkur frábær úrræði til að hefjast handa!

Nám striga

Ef þú ert alveg ný á striga gætirðu viljað byrja með einum af þessum handhægum leiðsögumönnum. Það eru hundruðir námskeið og leiðsögumenn þarna úti, en þessir þrír veita nánast öllu sem byrjandi vill vita um striga áður en hann byrjar.

Kafa inn í HTML5

Kafa inn í HTML5 hefur frábæran kafla um að vinna með striga sem inniheldur grunnskýringu og upplýsingar um að byggja einföld form, striga hnit, slóðir, texti og fleira.

Mozilla þróunarnet

The Mozilla þróunarnet hefur mjög ítarlegar leiðbeiningar um striga sem innihalda grunnatriði, teikna form, nota myndir, beita stílum og litum, umbreytingum, samsetningu og fleira.

HTML5 Canvas Tutorials

HTML5 Canvas Tutorials hefur nákvæmlega það sem titillinn bendir á: tonn af námskeiðum til að nota striga sem ná allt frá brautum og ferlum í myndir, texta og fleira.

Verkfæri, ramma og bókasöfn

Canvas er hægt að nota fyrir alla gestgjafa í mismunandi tilgangi, en forrit og leikir eru algengustu. Leikir, einkum, eru gríðarlega vinsæl notkun striga, með tonn af vélum í boði.

Óháð því sem þú vilt gera við striga, munu verkfæri og aðrar auðlindir hér að neðan hjálpa þér að byrja.

Animatron

Animatron er aukagjald tól til að búa til HTML5 fjör án kóðunar sem krafist er. Það hefur straumlínulagað notendaviðmót, styður sjálfvirkt farartæki (þannig að þú getur hlaðið niður HTML5, JavaScript og auðlindaskránni fyrir heildarstýringu), hefur samvinnuverkfæri í rauntíma og styður bæði opinber og einkaaðila verkefni.

Fríáætlunin styður allt að 20 opinber verkefni, en greiddar áætlanir gefa þér fleiri verkefni og aðrar aðgerðir, frá og með aðeins 6 $ / mánuði.

animatron

Mixeek

Mixeek er fjör tól sem byggist eingöngu á CSS3, HTML5 og JavaScript. Það hefur vefhönnunar tól sem auðvelt er að nota og mjög leiðandi. Og hreyfimyndin sem það skapar eru studd á IE, Firefox, Króm, Óperu og Safari, auk farsímaflettitæki.

Mixeek er algjörlega frjálst að nota.

mixeek

Radi

Radi leyfir þér að búa til myndskeið, fjör og rauntíma grafík án þess að læra að kóða. Það virkar bæði með striga og myndmerki og styður margs konar innihaldslög, þ.mt myndir, kvikmyndir, form, texti og fleira. Og auðvitað styður það gagnvirka þætti. Þú getur hlaðið niður Radi beta fyrir frjáls.

rad

PlayCanvas

PlayCanvas er auðvelt að nota WebGL leikvél sem er ókeypis og opinn uppspretta. Það felur í sér eðlisfræði vél (með stuðningi við stífa líkama, kallar, ökutæki og liðir), grafíkvél (með stuðningi við lýsingu á punktum, skuggum og eftirspurnaráhrifum) og fleira. PlayCanvas felur einnig í sér sameiginlega þróunarverkfæri, og inniheldur jafnvel ókeypis hýsingu fyrir leikina þína.

playcanvas

Stofna 2

Stofna 2 er gaming vél hannað sérstaklega fyrir 2d leiki. Það er frábært fyrir alla frá frjálslegur áhugamaður til fagfólksins sem vill búa til festa frumgerð og mockups, eða jafnvel spara tíma á erfðaskrá fyrir framleiðslu. Það felur í sér stuðning við sveigjanlegt hegðun, augnablik forsýning, öflugt viðburðarkerfi og auðvelt þenjanleiki. Og auðvitað geta leikirnir þínar flutt út á fjölbreyttar vettvangi. Þú getur sótt ókeypis útgáfu með takmarkaðri virkni (fullkominn til að prófa það), eða kaupa leyfi sem hefst á innan við $ 130.

byggðu 2

EaselJS

EaselJS er JavaScript bókasafn sem gerir það auðveldara að vinna með striga frumefni. API hennar er kunnuglegt við Flash forritara, en með JavaScript-skynjun. Það felur í sér mótmælahreiður, músamiðlunarmynstur og fleira. Það eru kynningar til að byrja með allt frá því að draga og sleppa til sprite blöð til sía og vektor grímur.

easeljs

Phaser

Phaser er fljótleg og frjáls opinn uppspretta ramma sem styður JavaScript og TypeScript. Það notar WebGL og striga, og hefur stuðning við fjör, agnir, myndavélar, tækjaskiljun, tilemaps og fleira.

Phaser

Three.js

Three.js er JavaScript bókasafn sem gerir það auðvelt að vinna með WebGL miklu auðveldara. Það einfaldar kóðann þinn verulega og er mjög vel skrifuð. Það eru tonn af frábærum dæmum um hvernig það er notað í reynd, þar á meðal á síðum eins og fyrir Hobbit kvikmyndirnar og fleira.

threejs

Turbulenz

Turbulenz er HTML5 spilavíti sem þú getur notað til að búa til, prófa og jafnvel safna peningum. Turbulenz samanstendur af tveimur hlutum: vélin og SDK. Vélin styður flutningsáhrif og agnir, eðlisfræðivél (þ.mt árekstur og fjörsstuðningur), vettvangsstjórnun og úrræði, og fleira. SDK inniheldur sýnishorn, skjöl, áhorfandi, verkvinnsluverkfæri og umbúðir og dreifingartæki.

turbulenz

MelónJS

MelónJS sameinar flísar kortið snið til að gera hönnun hraðar og meira straumlínulagað. Það var hannað sem einfalt, ókeypis, sjálfstæður bókasafn til að þróa 2D leiki sem eru í samræmi við allar helstu vafra. Það notar marghyrningsbundin árekstur algrím og víðtæka árekstrarskynjun með því að nota geislamyndun. Það felur einnig í sér tween og umskipti áhrif, og undirstöðu agna og fjör kerfi.

melónís

Quintus

Quintus er þægilegur-til-nota cross-pallur leikur vél sem leyfir þér að búa til leiki með miklu minna kóða. Dæmi leikur á síðuna þeirra notar rétt um 80 línur af kóða til að búa til platformer-stíl leik sem er ansi ótrúlegt. Quintus er að fullu skjalfest og hefur samfélag til að hjálpa þér ef þú þarft aðstoð.

quintus

Crafty

Crafty leyfir þér að gera með annaðhvort striga eða DOM. Það notar einingaþáttakerfi fyrir þróun leikja og forðast langa arfleifð. Það felur einnig í sér tonn af innfæddum hlutum fyrir fjör, áhrif, hljóð, inntak og fleira. Það hefur háþróaða SAT-árekstrarskynjun, það er vafraforrit og það styður sprite-kort til að auðvelda teikningu leikstofa.

slægur

LimeJS

LimeJS er HTML5 leikur ramma til að byggja upp innfæddur leikur fyrir nútíma tæki. Það er vel skjalfest, með samfélagi til frekari stuðnings. Það felur í sér aðgerðir fyrir skipulag, hnúður, form og fyllingar, viðburðir, hreyfimyndir og fleira.

limejs

KineticJS

KineticJS er hágæða ramma til að búa til fjör, umbreytingar, hnúður, lag, síun, viðburð meðhöndlun og fleira með HTML5 striga og JavaScript fyrir farsíma og skrifborð forrit. Það er vel skjalfest og það eru tonn af dæmum sem þegar eru til staðar.

KineticJS

bHive

bHive er striga ramma sem gerir það auðvelt að búa til ríka hreyfimyndir, leiki, forrit og notendaupplifun. Það felur í sér stuðning við teikningu, fjör og samskipti, með kynningum og dæmum sem og skjölum.

bhive

Paper.js

Paper.js er vektor grafík forskriftarþarfir ramma sem liggur ofan á striga. Það hefur öfluga eiginleika til að vinna með vektor grafík og bezier línur, allt pakkað upp í samræmi, hreint forritun tengi. Það er að mestu samhæft við og byggist á Scriptographer (forskriftarumhverfi fyrir Adobe Illustrator). Það er auðvelt að læra hvort þú ert byrjandi en einnig að hafa nóg af eiginleikum fyrir fleiri háþróaða notendur.

paperjs

Fabric.js

Fabric.js er einfalt en öflugt JavaScript HTML5 striga bókasafn sem veitir gagnvirka mótmæla líkan ofan á striga frumefni. Það inniheldur jafnvel SVG-til-striga (og öfugt) flokka. Þú getur búið til og búið til hluti á striga, þar á meðal myndir, flóknar form, texti og fleira.

fabric.js

Voxel.js

Voxel.js er opinn uppspretta 3D leikur bygging tól. Það gerir það auðveldara að búa til voxel leiki eins og Minecraft í vafranum. Það er skipt í marga hluti, svo þú getur notað bara það sem þú þarft í staðinn fyrir risastóra uppblásna leikramma.

voxel.js

Leikur {Lokun} DevKit

The Leikur {Lokun} DevKit gerir það auðveldara og hraðara að byggja leiki, með innfæddum hraða. Það er 100% JavaScript, með bardaga-prófuð kóða sem hefur verið beitt um heim allan. Það er hægt að nota með núverandi uppáhalds textaritlinum og vafranum þínum, án þess að þörf sé á öðrum sérhæfðum verkfærum eða niðurhalum. Og þar sem það notar OpenGL fyrir farsímaleikum, þá eru þeir með innfæddur hraði á Android og IOS.

gameclosure

Isogenic leikur vél

The Isogenic leikur vél er háþróaður HTML5 multiplayer leikur vél sem er notað af mörgum stórum nöfnum, þar á meðal BBC. Það felur í sér 2D og isometric stuðning, með frumefni, tweening og frumur byggir fjör. Og ólíkt öðrum "multiplayer" leikur vélum sem bara kasta í net bókasafn, hefur Isogenic fleiri háþróaður og rauntíma multiplayer virkni en í öðrum HTML5 leikur vél þarna úti.

erogenic leikur vél

Enchant.js

Enchant.js er einföld ramma til að byggja upp leiki og forrit með HTML5 og JavaScript. Það hefur verið notað á yfir 1.000 leikjum og forritum þegar og hefur víðtæka fylgiskjöl. Það er hlutbundin, multi-pallur, og atburður-ekin, heill með hreyfimynd, WebGL stuðning, innihald bókasafn, og fleira.

enchant.js

Wade leikur vél

The Wade leikur vél gerir það auðvelt að búa til leiki fyrir skrifborð og farsíma, og er byggð til að geta gengið vel á annaðhvort. Wade hefur uppbyggingu á skjánum þannig að þú getur fljótt búið til hvers konar leik sem þú þarft. Það hefur grunn mát fyrir sveigjanleika, eðlisfræði mát fyrir leiki sem þarfnast þeirra, isometric líkan fyrir RPG og stefnu leiki, og fleira.

vaða

LycheeJS

LycheeJS er HTML5 og innfæddur OpenGL leikur vél fyrir embed, hugga, farsíma, framreiðslumaður og skrifborð leikur. Það styður viðbrögðum skipulagi og felur í sér áhrif og tíðni hreyfils, Verlet eðlisfræði hreyfils, agna vél, sprite hreyfimynd, bitmap font vél, og margt fleira. Það felur einnig í sér vefrásartækni fyrir multiplayer leiki.

lycheejs

Heatmap.js

Heatmap.js er einfalt safn til að búa til JavaScript hitamyndir með HTML5 striga. Það er háþróaður hitamyndavistunarbókasafnið á vefnum, með mjög léttum fótspori (minna en 3kB gzip) og hefur aukagjald stuðningur í boði.

hitamynd

Chart.js

Chart.js leyfir þér að búa til einfaldar, hreinar, skemmtilegar töflur með striga og JavaScript. Það eru sex kortategundir í boði, það er óháð frjáls, móttækileg, mát og gagnvirkt.

chart.js

Niðurstaða

Óháð því sem áætlanir þínar eru með striga eru auðlindirnar hér að setja þig á vegi þínum. Byggingarleikir, forrit, og að öðru leyti bæta við fjör eða gagnvirkni við vefsvæðin þín er auðveldara með bókasöfnum, rammaum og leikvélar.