25+ resurser för att lyckas med HTML5 Canvas
Om du har bott under en sten under de senaste åren är dukelementet i HTML5-specifikationen ganska enkelt att förstå. I grund och botten är det ett rektangulärt område i din sida där du kan använda JavaScript för att rita allt du väljer.
Det är ganska bokstavligen en digital "duk" som du kan använda för att göra spelgrafik, grafer, animationer och andra visuella bilder i fluga. Detta eliminerar i grunden behovet av andra typer av online-animering och grafisk återgivning (som Flash), och är mycket mer kompatibelt över plattformar och enheter.
Förhoppningsvis visste du redan allt detta. Medan den grundläggande idén bakom Canvas är enkel kan det vara lite mer komplicerat att arbeta med det. Så här är några bra resurser för att komma igång!
Lärande duk
Om du är helt ny på duk, kanske du vill börja med en av de här praktiska guiderna. Det finns hundratals handledningar och guider där ute, men dessa tre ger nästan allt som en nybörjare vill veta om duk innan du börjar.
Dyk i HTML5
Dyk i HTML5 har ett fantastiskt kapitel om att arbeta med duk som innehåller en grundläggande definition och information om att bygga enkla former, kanfas koordinater, vägar, text och mer.
Mozilla Developer Network
De Mozilla Developer Network har en väldigt grundlig guide till duk som innehåller grunderna, teckningsformer, bilder, tillämpning av stilar och färger, transformationer, compositing och mer.
HTML5 Canvas Tutorials
HTML5 Canvas Tutorials har exakt vad titeln föreslår: massor av handledning för att använda duk som täcker allt från vägar och kurvor till bilder, text och mer.
Verktyg, ramverk och bibliotek
Canvas kan användas för en mängd olika ändamål, men appar och spel är de vanligaste. Spel, i synnerhet, är en enormt populär användning av duk, med massor av spelmotorer tillgängliga.
Oavsett vad du vill göra med duk kan verktygen och andra resurser nedan hjälpa dig att komma igång.
Animatron
Animatron är ett premiumverktyg för att skapa HTML5-animeringar utan kodning som krävs. Den har ett strömlinjeformat användargränssnitt, stöder självhäftande projekt (så att du kan ladda ner HTML5-, JavaScript- och resursfilerna för total kontroll), har realtidssamarbetingsverktyg och stöder både offentliga och privata projekt.
Den fria planen stöder upp till 20 offentliga projekt, medan betalda planer ger dig fler projekt och andra funktioner, från bara $ 6 / månad.
Mixeek
Mixeek är ett animeringsverktyg som endast bygger på CSS3, HTML5 och JavaScript. Den har ett online designverktyg som är lätt att använda och mycket intuitivt. Och animationerna som skapas stöds på IE, Firefox, Chrome, Opera och Safari, liksom mobila webbläsare.
Mixeek är helt gratis att använda.
Radi
Radi låter dig skapa video-, animations- och realtidsgrafik utan att lära sig att koda. Det fungerar med både duk och videotaggar, och stöder många olika innehållsskikt, inklusive bilder, filmer, former, text och mer. Och självklart stöder det interaktiva element. Du kan ladda ner Radi beta gratis.
PlayCanvas
PlayCanvas är en lättanvänd WebGL-spelmotor som är fri och öppen källkod. Den innehåller en fysikmotor (med stöd för styva kroppar, triggers, fordon och leder), grafikmotor (med stöd för per pixelbelysning, skuggor och efterverkningar) och mycket mer. PlayCanvas innehåller också utvecklingsverktyg för samarbeten, och innehåller även gratis värd för dina spel.
Konstruera 2
Konstruera 2 är en spelmotor utformad speciellt för 2d-spel. Det är bra för alla från den lediga hobbyisten till den professionella utvecklaren som vill skapa snabbare prototyper och mockups, eller till och med spara tid på kodning för produktion. Den innehåller stöd för flexibla beteenden, snabb förhandsvisning, ett kraftfullt händelsessystem och enkel utbyggbarhet. Och självklart kan dina spel exporteras till en mängd olika plattformar. Du kan ladda ner en gratis version med begränsad funktionalitet (perfekt för att prova det), eller köpa en licens som börjar på mindre än $ 130.
EaselJS
EaselJS är ett JavaScript-bibliotek som gör det lättare att arbeta med dukelementet. API: n är bekant för Flash-utvecklare, men med JavaScript-känslor. Den innehåller objektnestning, en mus interaktionsmodell och mycket mer. Det finns demo för att komma igång med allt från dra och släppa till spritark till filter och vektormasker.
Phaser
Phaser är en snabb och fri öppen källkod som stöder JavaScript och TypeScript. Den använder WebGL och kanfas och har stöd för animering, partiklar, kameror, enhetsskalning, flikar och mycket mer.
Three.js
Three.js är ett JavaScript-bibliotek som gör det enkelt att arbeta med WebGL mycket lättare. Det förenklar din kod avsevärt och är väldigt noggrant dokumenterad. Det finns massor av bra exempel på hur det används i praktiken, bland annat på webbplatser som för The Hobbit-filmer och mer.
Turbulenz
Turbulenz är en HTML5-spelmotor som du kan använda för att skapa, testa och till och med tjäna pengar på spel. Turbulenz består av två delar: motorn och SDK. Motorn stöder reningseffekter och partiklar, en fysikmotor (inklusive kollision och animationsstöd), scen- och resurshantering och mycket mer. SDK: n innehåller prover, dokumentation, en tittare, verktyg för verktygshantering och förpacknings- och distribueringsresurser.
MelonJS
MelonJS integrerar plattformsplattformen för att utforma nivåer snabbare och mer strömlinjeformat. Det var utformat som ett enkelt, gratis, fristående bibliotek för att utveckla 2D-spel som är kompatibla med alla större webbläsare. Den använder en polygonbaserad kollisionsalgoritm och bredfas kollisionsdetektering med hjälp av rymdpartitionering. Det innehåller också mellan- och övergångseffekter och grundläggande partikel- och animationssystem.
Quintus
Quintus är en lättanvänd tvärplattformsmotor som låter dig skapa spel med mycket mindre kod. Exemplet spelet på deras webbplats använder rätt runt 80 rader av kod för att skapa ett platformer-stil spel som är ganska fantastiskt. Quintus är fullt dokumenterad och har en community för att hjälpa dig om du behöver support.
Listig
Listig kan du göra med antingen duk eller DOM. Den använder ett komponentsystem för spelutveckling, vilket undviker långa arvskedjor. Det innehåller också massor av inbyggda komponenter för animering, effekter, ljud, ingångar och mer. Den har avancerad SAT-kollisionsdetektering, den är kompatibel med flera webbläsare, och den stöder sprite-kartor för att lättare kunna rita spelorgan.
LimeJS
LimeJS är ett HTML5-spelramverk för att bygga inbyggda spel för moderna enheter. Det är väl dokumenterat, med en gemenskap för ytterligare stöd. Den innehåller funktioner för layouter, noder, former och fyllningar, händelser, animationer och mer.
KineticJS
KineticJS är en högpresterande ram för att bygga animeringar, övergångar, nodernestning, lagring, filtrering, händelsehantering och mycket mer med HTML5-kanfas och JavaScript för mobila och stationära appar. Det är väl dokumenterat och det finns massor av exempel som redan finns tillgängliga.
bHive
bHive är en dukram som gör det enkelt att skapa rika animationer, spel, applikationer och användarupplevelser. Den innehåller stöd för teckning, animering och interaktion med demo och exempel samt dokumentation.
Paper.js
Paper.js är ett vektorgrafik skript ramverk som löper upp på kanfas. Den har kraftfulla funktioner för att arbeta med vektorgrafik och bezierkurvor, alla inslagna i ett konsekvent, rent programmeringsgränssnitt. Den är till stor del kompatibel med och baserad på Scriptographer (en skriptmiljö för Adobe Illustrator). Det är lätt att lära sig om du är nybörjare samtidigt som du har gott om funktioner för mer avancerade användare.
Fabric.js
Fabric.js är ett enkelt men kraftfullt JavaScript HTML5-kanvasbibliotek som ger en interaktiv objektmodell ovanpå kanvaselementet. Det innehåller även en SVG-till-duk (och vice versa) parser. Du kan skapa och fylla objekt på kanfas, inklusive bilder, komplexa former, text och mer.
Voxel.js
Voxel.js är en open source 3D-spelbyggnadsverktyg. Det gör det lättare att skapa voxelspel som Minecraft i webbläsaren. Den är uppdelad i flera komponenter, så du kan bara använda vad du behöver istället för ett enormt uppspelat spelramverk.
Spel {Closure} DevKit
De Spel {Closure} DevKit gör det lättare och snabbare att bygga spel, med inhemsk hastighet. Det är 100% JavaScript, med kamptestad kod som har implementerats över hela världen. Den kan användas med din nuvarande textredigerare och webbläsare, utan att behöva använda andra specialverktyg eller nedladdningar. Och eftersom den använder OpenGL för mobila spel har de inbyggd hastighet på Android och iOS.
Isogena spelmotor
De Isogena spelmotor är en avancerad HTML5 multiplayer spelmotor som används av ett antal stora namn, inklusive BBC. Den innehåller 2D och isometrisk support, med partikelemitterare, tweening och cellbaserad animering. Och till skillnad från andra "multiplayer" -spelmotorer som bara slänger i ett nätverksbibliotek, har Isogenic en mer avancerad och realtid multiplayer-funktionalitet än i någon annan HTML5-spelmotor där ute.
Enchant.js
Enchant.js är en enkel ram för att bygga spel och appar med HTML5 och JavaScript. Den har använts på över 1000 spel och appar redan och har omfattande stöddokument. Det är objektorienterat, multiplattform och händelsesdrevet, komplett med en animationsmotor, WebGL-support, ett innehållsbibliotek och mycket mer.
Wade Game Engine
De Wade Game Engine gör det enkelt att skapa spel för stationära och mobila enheter, och är byggd för att fungera bra på antingen. Wade har en modulär arkitektur så att du snabbt kan skapa vilken typ av spel du behöver. Den har en basmodul för flexibilitet, en fysikmodul för spel som behöver dem, en isometrisk modell för RPG och strategispel och mycket mer.
LycheeJS
LycheeJS är en HTML5 och inbyggd OpenGL-spelmotor för inbyggd, konsol, mobil, server och skrivbordsspel. Den stöder responsiva layouter och innehåller en effekt- och tween-motor, Verlet-fysikmotor, en partikelmotor, en sprite-animationsmotor, en bitmap-fontmotor och mycket mer. Det innehåller också websockets-teknik för multiplayer-spel.
Heatmap.js
Heatmap.js är ett enkelt bibliotek för att skapa JavaScript-värmekartor med HTML5-kanfas. Det är det mest avancerade värmekarta visualiseringsbiblioteket på webben, med ett mycket lätt fotavtryck (mindre än 3kB gzip) och har premium support tillgängligt.
Chart.js
Chart.js kan du skapa enkla, rena, engagerande diagram med hjälp av duk och JavaScript. Det finns sex diagramtyper tillgängliga, det är beroendefri, responsiv, modulär och interaktiv.
Slutsats
Oavsett vad dina planer med duk är, bör resurserna här ställa dig på din väg. Att bygga spel, applikationer och på annat sätt lägga till animering eller interaktivitet för dina webbplatser görs mycket lättare med kanvasbibliotek, ramverk och spelmotorer.