Petite Librairie javascript pour créer des jeux vidéo en canvas | Small canvas painting library
Demo :
example.html
Installation :
In Pure Javascript :
import juste fosfo.js to your project directory
With npm package manager :
$ npm install fosfo
const Fosfo = ; let canvas = document;canvas
With nodejs :
$ npm install canvas$ npm install fosfo
const createCanvas loadImage = ;const Fosfo = ; const canvas = ; // nodejs create canvas let fosfo = canvas; fosfo;
Documentation :
Preload images :
fosfo.loadimage
permet de charger vos images avant de démarrer votre programme.
Example :
let canvas = document;let fosfo = canvas; fosfo;
My First display :
fosfo.draw
permet d'ajouter une image sur le canvas
Example :
let canvas = document;let fosfo = canvas; fosfo;
Get blob :
fosfo.toDataURL()
get blob url from canvas
Example :
let canvas = document;let fosfo = canvas; fosfo;
Clear one img :
fosfo.undraw(name of draw image)
clear one or multiple drawed images
Example :
let canvas = document;let fosfo = canvas; fosfo;
Clear canvas :
fosfo.clear()
clear all canvas drawed images
Example :
let canvas = document;let fosfo = canvas; fosfo;
Sprite animation :
fosfo.setFramesToImg
applique sur une image une grille de sprite qui permet l'usage de la fonction fosfo.drawframe pour afficher un sprite en particulier.
Example :
Assets :
let canvas = document;let fosfo = canvas; fosfo;
Display loop :
Loop display with Fosfo
Example :
let canvas = document;let fosfo = canvas; let { //TODO future code fosfo; fosfo; // paint canvas with drawed object}; fosfo;
Display loop with moving & sprite animation :
Example :
let canvas = document;let fosfo = canvas;let count = 0; let { //TODO future code let anims = 6 7 8 9 10 11; fosfo; fosfo; count += 1; if count >= animslength count = 0; fosfo; // paint canvas with drawed object}; fosfo;