25 + ressurser for å lykkes med HTML5 Canvas
Hvis du har levd under en stein de siste par årene, er lerretelementet i HTML5-spesifikasjonen ganske enkelt å forstå. I utgangspunktet er det et rektangulært område på siden din der du kan bruke JavaScript for å tegne alt du velger.
Det er ganske bokstavelig talt et digitalt "lerret" som du kan bruke til å gjengi spillgrafikk, grafer, animasjoner og andre visuelle bilder på fluen. Dette eliminerer i utgangspunktet behovet for andre typer online-animasjon og grafisk gjengivelse (som Flash), og er mye mer kompatibel på tvers av plattformer og enheter.
Forhåpentligvis visste du alt dette. Mens grunnleggende ideen bak lerret er enkel, kan det faktisk være litt mer komplisert å jobbe med det. Så her er noen gode ressurser for å komme i gang!
Læring lerret
Hvis du er helt ny på lerret, vil du kanskje starte med en av disse praktiske guider. Det er hundrevis av opplæringsprogrammer og guider der ute, men disse tre gir nesten alt en nybegynner vil vite om lerret før han begynner.
Dykk inn i HTML5
Dykk inn i HTML5 har et fantastisk kapittel om å jobbe med lerret som inneholder en grunnleggende definisjon, og informasjon om å bygge enkle former, lerretskoordinater, stier, tekst og mer.
Mozilla Developer Network
De Mozilla Developer Network har en veldig grundig guide til lerret som inneholder grunnleggende, tegning figurer, bruker bilder, bruker stiler og farger, transformasjoner, compositing og mer.
HTML5 Canvas Tutorials
HTML5 Canvas Tutorials har nøyaktig hva tittelen antyder: tonnevis av opplæringsprogrammer for bruk av lerret som dekker alt fra stier og kurver til bilder, tekst og mer.
Verktøy, rammer og biblioteker
Lerret kan brukes til en rekke forskjellige formål, men programmer og spill er de vanligste. Spesielle spill er spesielt en enorm populær bruk av lerret, med tonnevis av spillmotorer tilgjengelig.
Uansett hva du vil gjøre med lerret, vil verktøyene og andre ressurser nedenfor hjelpe deg med å komme i gang.
Animatron
Animatron er et premiumverktøy for å lage HTML5 animasjoner uten koding som kreves. Den har et strømlinjeformet brukergrensesnitt, støtter selvbehandlede prosjekter (slik at du kan laste ned HTML5-, JavaScript- og ressursfilene for total kontroll), har sanntids samarbeidsverktøy og støtter både offentlige og private prosjekter.
Den frie planen støtter opptil 20 offentlige prosjekter, mens betalte planer gir deg flere prosjekter og andre funksjoner, som begynner på bare $ 6 / måned.
Mixeek
Mixeek er et animasjonsverktøy som er basert utelukkende på CSS3, HTML5 og JavaScript. Den har et online designverktøy som er enkelt å bruke og veldig intuitivt. Og animasjonene som opprettes støttes på IE, Firefox, Chrome, Opera og Safari, samt mobilnettlesere.
Mixeek er helt gratis å bruke.
Radi
Radi lar deg lage video, animasjon og realtid grafikk uten å lære å kode. Den fungerer med både lerret og video-tagger, og støtter mange typer innholdslag, inkludert bilder, filmer, former, tekst og mer. Og selvfølgelig støtter det interaktive elementer. Du kan laste ned Radi beta gratis.
PlayCanvas
PlayCanvas er en enkel å bruke WebGL-spillmotor som er gratis og åpen kildekode. Den inneholder en fysikkmotor (med støtte for stive legemer, triggere, kjøretøy og ledd), grafikkmotor (med støtte for per pixelbelysning, skygger og ettervirkninger) og mer. PlayCanvas inneholder også samarbeidsutviklingsverktøy, og inkluderer også gratis hosting for spillene dine.
Konstruer 2
Konstruer 2 er en spillmotor designet spesielt for 2d-spill. Det er flott for alle fra den uformelle hobbyisten til den profesjonelle utvikleren som ønsker å skape raskere prototyper og mockups, eller til og med spare tid på koding for produksjon. Den inkluderer støtte for fleksibel atferd, øyeblikkelig forhåndsvisning, et kraftig hendelsessystem og enkel utvidbarhet. Og selvfølgelig kan spillene dine eksporteres til en rekke plattformer. Du kan laste ned en gratis versjon med begrenset funksjonalitet (perfekt for å prøve det), eller kjøpe en lisens som starter på mindre enn $ 130.
EaselJS
EaselJS er et JavaScript-bibliotek som gjør det lettere å jobbe med lerretelementet. API-en er kjent for Flash-utviklere, men med JavaScript-følsomhet. Den inkluderer objektnesting, en interaksjonsmodell for mus og mer. Det er demoer for å komme i gang med alt fra dra og slipp til å sprite ark til filtre og vektor masker.
phaser
phaser er en rask og fri åpen kildekode ramme som støtter JavaScript og TypeScript. Den bruker WebGL og lerret, og har støtte for animasjon, partikler, kameraer, enhetskalering, tilemaps og mer.
Three.js
Three.js er et JavaScript-bibliotek som gjør det enkelt å arbeide med WebGL mye lettere. Det forenkler koden betydelig, og er veldig grundig dokumentert. Det er mange gode eksempler på hvordan den brukes i praksis, blant annet på nettsteder som for The Hobbit-filmer og mer.
Turbulenz
Turbulenz er en HTML5 spillmotor som du kan bruke til å lage, teste og til og med tjene penger på spill. Turbulenz består av to deler: motoren og SDK. Motoren støtter gjengivelseffekter og partikler, en fysikkmotor (inkludert kollisjon og animasjonsstøtte), scene- og ressursstyring og mer. SDK inkluderer eksempler, dokumentasjon, en viewer, verktøy for ressursbehandling og emballasje og distribusjonsressurser.
MelonJS
MelonJS integrerer flislagt kartformat for å gjøre utformingen av nivåer raskere og mer strømlinjeformet. Den ble designet som et enkelt, gratis, frittstående bibliotek for å utvikle 2D-spill som er kompatible med alle de store nettleserne. Den bruker en polygonbasert kollisionsalgoritme og bredfase kollisjonsdeteksjon ved hjelp av spredning av partisjoner. Det inkluderer også tween og overgangseffekter, og grunnleggende partikkel- og animasjonssystemer.
Quintus
Quintus er en brukervennlig plattformspillmotor som lar deg lage spill med mye mindre kode. Eksempel spillet på deres nettsted bruker rett rundt 80 linjer med kode for å lage et plattformspill-spill som er ganske fantastisk. Quintus er fullt dokumentert og har et fellesskap for å hjelpe deg hvis du trenger støtte.
Listig
Listig kan du gjøre med enten lerret eller DOM. Den bruker et enhetskomponent-system for spillutvikling, og unngår lange arvkæder. Den inneholder også tonnevis av innfødte komponenter for animasjon, effekter, lyd, innganger og mer. Den har avansert SAT-kollisjonssensor, den er kompatibel med kryssbrowser, og den støtter sprite-kart for lettere tegning av spill-enheter.
LimeJS
LimeJS er et rammeverk for HTML5-spill for å bygge opp morsomme spill for moderne enheter. Det er godt dokumentert, med et fellesskap for videre støtte. Den inneholder funksjoner for layouter, noder, former og fyll, hendelser, animasjoner og mer.
KineticJS
KineticJS er et ypperlig rammeverk for å bygge animasjoner, overganger, node nesting, layering, filtrering, hendelseshåndtering og mer med HTML5 lerret og JavaScript for mobil og desktop apps. Det er godt dokumentert og det er mange eksempler som allerede er tilgjengelige.
bHive
bHive er et lerret rammeverk som gjør det enkelt å lage rike animasjoner, spill, applikasjoner og brukeropplevelser. Den inkluderer støtte for tegning, animasjon og samhandling, med demoer og eksempler samt dokumentasjon.
Paper.js
Paper.js er et vektorgrafik skript rammeverk som går på toppen av lerret. Den har kraftige funksjoner for å jobbe med vektorgrafikk og bezierkurver, alt pakket inn i et konsistent, rent programmeringsgrensesnitt. Den er stort sett kompatibel med og basert på Scriptographer (et skriptmiljø for Adobe Illustrator). Det er lett å lære om du er nybegynner, samtidig som du har mange funksjoner for mer avanserte brukere.
Fabric.js
Fabric.js er et enkelt, men kraftig JavaScript HTML5 lerretsbibliotek som gir en interaktiv objektmodell på toppen av lerretelementet. Den inneholder også en SVG-til-lerret (og omvendt) parser. Du kan opprette og fylle objekter på lerret, inkludert bilder, komplekse former, tekst og mer.
Voxel.js
Voxel.js er en åpen kildekode 3D-spillbyggingsverktøy. Det gjør det enklere å lage voxel spill som Minecraft i nettleseren. Den er delt inn i flere komponenter, slik at du kan bruke akkurat det du trenger i stedet for et stort, oppsvulmet spillramme.
Spill {Closure} DevKit
De Spill {Closure} DevKit gjør det enklere og raskere å bygge spill, med innfødt fart. Det er 100% JavaScript, med kamptestet kode som er blitt distribuert over hele verden. Den kan brukes med din nåværende favoritt tekstredigerer og nettleser, uten behov for andre spesialiserte verktøy eller nedlastinger. Og siden den bruker OpenGL for mobile spill, har de innfødt fart på Android og iOS.
Isogenic Game Engine
De Isogenic Game Engine er en avansert HTML5 multiplayer spillmotor som brukes av en rekke store navn, inkludert BBC. Den inkluderer 2D og isometrisk støtte, med partikkelemittere, tweening og cellebasert animasjon. Og i motsetning til andre "multiplayer" spillmotorer som bare kaster i et nettverksbibliotek, har Isogenic en mer avansert og realtid multiplayer-funksjonalitet enn i en hvilken som helst annen HTML5-spillmotor der ute.
Enchant.js
Enchant.js er et enkelt rammeverk for å bygge spill og programmer med HTML5 og JavaScript. Den har blitt brukt på over 1000 spill og apps allerede, og har omfattende støttedokumenter. Det er objektorientert, multi-plattform og hendelsesdrevet, komplett med en animasjonsmotor, WebGL-støtte, et innholdsbibliotek og mer.
Wade Game Engine
De Wade Game Engine gjør det enkelt å lage spill for stasjonære og mobile enheter, og er bygget for å fungere godt på begge sider. Wade har en modulær arkitektur, slik at du raskt kan lage hvilken type spill du trenger. Den har en base modul for fleksibilitet, en fysikk modul for spill som trenger dem, en isometrisk modell for RPG og strategispill, og mer.
LycheeJS
LycheeJS er en HTML5 og native OpenGL-spillmotor for innebygd, konsoll, mobil, server og skrivebordsspill. Den støtter responsive layouter, og inkluderer en effekt- og tween-motor, Verlet-fysikkmotor, en partikkelmotor, en sprite-animasjonsmotor, en bitmap-fontmotor og mye mer. Den inneholder også websockets-teknologi for multiplayer-spill.
Heatmap.js
Heatmap.js er et enkelt bibliotek for å lage JavaScript varmekort ved hjelp av HTML5 lerret. Det er det mest avanserte varmekartsbiblioteket på nettet, med et veldig lett fotavtrykk (mindre enn 3kB gzip), og har premium støtte tilgjengelig.
Chart.js
Chart.js lar deg lage enkle, rene, engasjerende diagrammer med lerret og JavaScript. Det er seks diagramtyper tilgjengelig, det er avhengighetsfritt, responsivt, modulært og interaktivt.
Konklusjon
Uansett hva dine planer med lerret er, bør ressursene her sette deg på veien. Bygging av spill, applikasjoner og ellers å legge til animasjon eller interaktivitet til nettstedene dine, gjøres mye lettere med lerretsbiblioteker, rammer og spillmotorer.