25 + ressourcer til at klare HTML5 Canvas
Hvis du har levet under en sten i de sidste par år, er lærredelementet i HTML5-specifikationen ret nemt at forstå. Dybest set er det et rektangulært område på din side, hvor du kan bruge JavaScript til at tegne noget, du vælger.
Det er ret bogstaveligt et digitalt "lærred", som du kan bruge til at gengive spilgrafik, grafer, animationer og andre visuelle billeder i luften. Dette eliminerer i grunden behovet for andre typer online-animation og grafikgengivelse (som Flash), og er meget mere kompatibel på tværs af platforme og enheder.
Forhåbentlig vidste du allerede alt det. Mens den grundlæggende ide bag lærred er enkel, kan det faktisk være mere komplekst at arbejde med det. Så her er nogle gode ressourcer til at komme i gang!
Læring lærred
Hvis du er helt ny til lærred, kan du starte med en af disse praktiske guider. Der er hundredvis af vejledninger og vejledninger derude, men disse tre giver stort set alt, hvad en nybegynder gerne vil vide om lærred, før de kommer i gang.
Dyk ind i HTML5
Dyk ind i HTML5 har et fantastisk kapitel om at arbejde med lærred, der indeholder en grundlæggende definition og information om bygning af simple former, lærredskoordinater, stier, tekst og meget mere.
Mozilla Developer Network
Det Mozilla Developer Network har en meget grundig vejledning til lærred, der indeholder det grundlæggende, tegne figurer, bruger billeder, anvender stilarter og farver, transformationer, compositing og meget mere.
HTML5 Canvas Tutorials
HTML5 Canvas Tutorials har præcis hvad titlen antyder: tonsvis af tutorials til brug af lærred, der dækker alt fra stier og kurver til billeder, tekst og meget mere.
Værktøjer, rammer og biblioteker
Lærred kan bruges til en lang række forskellige formål, men apps og spil er de mest almindelige. Spil er især en meget populær brug af lærred, med masser af spilmotorer til rådighed.
Uanset hvad du vil gøre med lærred, vil værktøjerne og andre ressourcer nedenfor hjælpe dig med at komme i gang.
Animatron
Animatron er et premiumværktøj til oprettelse af HTML5-animationer uden kodning påkrævet. Den har et strømlinet brugergrænseflade, understøtter selvstændige hostede projekter (så du kan downloade HTML5-, JavaScript- og ressourcefilerne til total kontrol), har realtidsværktøjer til samarbejde og understøtter både offentlige og private projekter.
Den gratis plan understøtter op til 20 offentlige projekter, mens betalte planer giver dig flere projekter og andre funktioner, der starter med kun $ 6 / måned.
Mixeek
Mixeek er et animationsværktøj, der udelukkende er baseret på CSS3, HTML5 og JavaScript. Det har et online designværktøj, der er let at bruge og meget intuitivt. Og de animationer, det opretter, understøttes på IE, Firefox, Chrome, Opera og Safari samt mobile browsere.
Mixeek er helt gratis at bruge.
Radi
Radi giver dig mulighed for at lave video, animation og realtid grafik uden at lære at kode. Det fungerer sammen med lærred og video tags og understøtter mange slags indholdslag, herunder billeder, film, former, tekst og meget mere. Og selvfølgelig understøtter det interaktive elementer. Du kan downloade Radi beta gratis.
PlayCanvas
PlayCanvas er en brugervenlig WebGL-spilmotor, der er fri og åben kilde. Den omfatter en fysikmotor (med støtte til stive legemer, triggere, køretøjer og led), grafikmotor (med støtte til per pixelbelysning, skygger og eftervirkninger) og meget mere. PlayCanvas indeholder også samarbejdsudviklingsværktøjer og indeholder endda gratis hosting til dine spil.
Konstruer 2
Konstruer 2 er en spilmotor designet specielt til 2d spil. Det er fantastisk for alle fra den afslappede hobbyist til den professionelle udvikler, der ønsker at skabe hurtigere prototyper og mockups, eller endda spare tid på kodning for produktion. Den omfatter support til fleksibel adfærd, øjeblikkelige forhåndsvisninger, et kraftfuldt hændelsessystem og nem udvidelighed. Og selvfølgelig kan dine spil eksporteres til en række platforme. Du kan downloade en gratis version med begrænset funktionalitet (perfekt til at prøve det) eller købe en licens startende med mindre end $ 130.
EaselJS
EaselJS er et JavaScript-bibliotek, der gør det lettere at arbejde med lærredelementet. API'en er kendt for Flash-udviklere, men med JavaScript-sensibiliteter. Det omfatter objekt nesting, en mus interaktion model og meget mere. Der er demoer til at komme i gang med alt fra træk og slip til sprite ark til filtre og vektor masker.
Phaser
Phaser er en hurtig og gratis open source ramme, der understøtter JavaScript og TypeScript. Den bruger WebGL og lærred og har støtte til animation, partikler, kameraer, enhedsskalering, tilemaps og meget mere.
Three.js
Three.js er et JavaScript-bibliotek, der gør det nemt at arbejde med WebGL meget lettere. Det forenkler din kode betydeligt og er meget grundigt dokumenteret. Der er masser af gode eksempler på, hvordan det bruges i praksis, herunder på websteder som for The Hobbit-film og meget mere.
Turbulenz
Turbulenz er en HTML5 spilmaskine, som du kan bruge til at skabe, teste og endda tjene penge på spil. Turbulenz består af to dele: motoren og SDK. Motoren understøtter renereffekter og partikler, en fysikmotor (herunder kollision og animationssupport), scene- og ressourcestyring og meget mere. SDK'et indeholder prøver, dokumentation, en viewer, værktøjer til behandling af ressourcer og emballage- og implementeringsressourcer.
MelonJS
MelonJS integrerer det flisede kortformat for at gøre designniveauer hurtigere og mere strømlinet. Det blev designet som et simpelt, gratis, frittstående bibliotek til udvikling af 2D-spil, der er kompatible med alle de store browsere. Den bruger en polygonbaseret kollisionsalgoritme og bredfase kollisionsdetektering ved hjælp af spacial partitionering. Det indeholder også tween- og overgangseffekter og grundlæggende partikel- og animationssystemer.
Quintus
Quintus er en brugervenlig platform-spilmotor, der lader dig oprette spil med meget mindre kode. Eksemplet spillet på deres websted bruger lige omkring 80 linjer kode til at skabe et platformer-stil spil, der er temmelig fantastisk. Quintus er fuldt dokumenteret og har et fællesskab for at hjælpe dig, hvis du har brug for support.
Snu
Snu lader dig gøre med enten lærred eller DOM. Det bruger et enhedskomponentsystem til spiludvikling, hvilket undgår lange arvskæder. Det indeholder også tonsvis af indbyggede komponenter til animation, effekter, lyd, input og meget mere. Den har avanceret SAT-kollisionsdetektering, den er kompatibel på tværs af browseren, og den understøtter sprite-kort til lettere tegning af spil enheder.
LimeJS
LimeJS er et HTML5-spil ramme for at opbygge native-lignende spil til moderne enheder. Det er veldokumenteret, med et fællesskab for yderligere support. Det omfatter funktioner til layouter, noder, former og fyldninger, begivenheder, animationer og meget mere.
KineticJS
KineticJS er et højtydende rammeværk til opbygning af animationer, overgange, node nesting, layering, filtrering, hændelseshåndtering og mere med HTML5 lærred og JavaScript til mobile og stationære apps. Det er veldokumenteret, og der er mange eksempler, der allerede er tilgængelige.
bHive
bHive er et lærredsramme, der gør det nemt at oprette rige animationer, spil, applikationer og brugeroplevelser. Den omfatter support til tegning, animation og interaktion med demoer og eksempler samt dokumentation.
Paper.js
Paper.js er en vektor grafik script script ramme, der løber oven på lærred. Den har kraftfulde funktioner til at arbejde med vektorgrafik og bezierkurver, alt sammen indpakket i en konsekvent, ren programmeringsinterface. Det er stort set kompatibelt med og baseret på Scriptographer (et scripting miljø til Adobe Illustrator). Det er nemt at lære, om du er en nybegynder, mens du også har masser af funktioner til mere avancerede brugere.
Fabric.js
Fabric.js er et simpelt, men kraftfuldt JavaScript HTML5 lærredsbibliotek, der giver en interaktiv objektmodel oven på lærredselementet. Det indeholder endda et SVG-til-lærred (og omvendt) parser. Du kan oprette og udfylde objekter på lærred, herunder billeder, komplekse figurer, tekst og meget mere.
Voxel.js
Voxel.js er et open source 3D spilbygget værktøjskasse. Det gør det nemmere at oprette voxel-spil som Minecraft i browseren. Det er opdelt i flere komponenter, så du kan bruge lige hvad du har brug for i stedet for et stort, opustet spilramme.
Spil {Lukning} DevKit
Det Spil {Lukning} DevKit gør det nemmere og hurtigere at bygge spil med indfødt fart. Det er 100% JavaScript, med kamptestet kode, der er blevet implementeret over hele verden. Den kan bruges sammen med din nuværende favoritteksteditor og browser uden behov for andre specialiserede værktøjer eller downloads. Og da det bruger OpenGL til mobile spil, har de indbygget hastighed på Android og iOS.
Isogenic Game Engine
Det Isogenic Game Engine er en avanceret HTML5 multiplayer spil motor, der bruges af en række store navne, herunder BBC. Den omfatter 2D og isometrisk support, med partikelemittere, tweening og cellebaseret animation. Og i modsætning til andre "multiplayer" spilmotorer, der bare smider i et netværksbibliotek, har Isogenic en mere avanceret og realtid multiplayer-funktionalitet end i enhver anden HTML5-spilmotor derude.
Enchant.js
Enchant.js er en simpel ramme for opbygning af spil og apps med HTML5 og JavaScript. Det er blevet brugt på over 1.000 spil og apps allerede, og har omfattende dokumentation. Det er objektorienteret, multi-platform og event-driven, komplet med en animationsmotor, WebGL-support, et indholdsbibliotek og meget mere.
Wade Game Engine
Det Wade Game Engine gør det nemt at oprette spil til stationære og mobile enheder og er bygget til at fungere godt på begge sider. Wade har en modulær arkitektur, så du hurtigt kan oprette den type spil du har brug for. Det har et basismodul for fleksibilitet, et fysikmodul til spil, der har brug for dem, en isometrisk model til RPG og strategispil og meget mere.
LycheeJS
LycheeJS er en HTML5 og native OpenGL-spilmotor til indlejret, konsol, mobil, server og desktop-spil. Den understøtter reagerende layout og indeholder en effekt og tween motor, Verlet fysik motor, en partikelmotor, en sprite animationsmotor, en bitmap skrifttype motor og meget mere. Det indeholder også websockets teknologi til multiplayer spil.
Heatmap.js
Heatmap.js er et simpelt bibliotek til oprettelse af JavaScript varmekort med HTML5 lærred. Det er det mest avancerede varmekort visualiseringsbibliotek på nettet med et meget let fodspor (mindre end 3kB gzip) og har premium support til rådighed.
Chart.js
Chart.js lader dig oprette enkle, rene, engagerende diagrammer ved brug af lærred og JavaScript. Der findes seks diagramtyper, det er afhængighedsfrit, lydhørt, modulært og interaktivt.
Konklusion
Uanset hvad dine planer med lærred er, bør ressourcerne her sætte dig på din vej. Byggespil, applikationer og ellers at tilføje animation eller interaktivitet til dine websteder gøres meget lettere med lærredsbiblioteker, rammer og spilmotorer.