bg-canvases
Tool for creating animated backgrounds on HTML 5 canvases.
Contents
-
1.1 Installation
1.2 Basic HTML with HTML5 Canvases
1.3 Figures
-
2.1 CSS
2.2 JS
2.3 Result
-
3.1. Setting and creating layers
3.3 Functions
Demo
Preparing
Installation
$ npm install bg-canvases
or
$ yarn add bg-canvases
Basic HTML with HTML5 Canvases
You need HTML5 Canvas
. In this example we have 2 canvases:
Demo
Figures
You want to draw figures on the canvas, so you must have classes for these figures. There are certain requirements for classes:
- An instance of a class must have a
visibility
parameter:visible; // Draw method will be called if visible === true; - It must have draw method with canvas context parameter:{// Something drawing on ctxreturn this;}
Proper prototype example:
{ thisx = x; thisy = y; thisr = radius; thisvisible = true; // Visibility parameter // Anything else } // A red circle with radius r will be drawn in point [x, y] { ctx; const x y r = this; ctx; ctx; ctxstrokeStyle = 'red'; ctxfillStyle = 'red'; ctx; ctx; ctx; return this; } // Anything else
Exapmle
Example of usage.
CSS
Some basic style for canvas:
JS
; // Importing figure class; // Importing this // Get canvases from domconst purple = document red = document; // Get contextsconst ctxPurple = purple ctxRed = red; // Setting width and height of canvases// Don't forget to scale your canvases for screen pixel density const width = 500 height = 250; // Creating Backgroundconst bg = ; // Figure creator function const creator = { const radius = 25 x = width / 2 y = height / 2 speed = i + 1 / 2 color = `rgb(, 50, )`; //* Creator function has parameter i (iteration), and must return new instance of Figure *// return x y radius speed speed color;}// Animation functionconst animation = { if foptionsaxis + fradius >= param || foptionsaxis - fradius <= 0 // Change direction if circle touches border foptionssetDirect-foptionsdirect; foptionssetterfoptionsaxis + foptionsdirect;}// Creating animation functions for x axis and y axisconst xAnimation = ;const yAnimation = ; // Creating layersbg;bg; // Animatingconst animate = { bg; window;};window;
Result
purplestyleposition = 'absolute'; // Makes canvases lay one above other redstyleposition = 'absolute';
bg; // Stop purple layer
bgstart; // Start all animationsbg; // Hiding red layer
bg; // Make red visible againbg; // Changing purple animation t yAnimation
API
Setting and creating layers
new Background()
Creates new bg-canvases object.
const bg = ;
createLayer(layerId, ctx, figureCreator, quantity, animation)
Creates instance of Layer inside Background. Parameters:
ctx
-- Canvas drawing contextlayerId
-- Layer IDfigureCreator(i)
-- Function that creates figure [i
- iteratee]quantity
-- A number of figures that will be createdanimation(f, figures, ctx, layerId)
-- Animation function that will be called with every figures in layer [f
- figure,figures
- figures on layer,ctx
- context,layerId
-layer id]
bg; /* Creates layer 'myLayer' with 1 figure Figure and without animation' */ bg;/* Creates layer 'anotherLayer' with 20 AnotherFigure's and without animation */ const myAnimation = { // Do something with figure f };bg;/* Creates layer 'animatedLayer' with 20 Figure's and animation */
getLayer(layerId)
Returns layer.
bg; // => Returns instance of Layer with id 'animatedLayer'
removeLayer(layerId)
Removes layer.
bg; // => {...}bg;bg; // => undefined
Animation and drawing
setAnimation(animation, layerId)
Sets animation function.
bg;// or // bg.getLayer('myLayer').setAnimation(myAnimation);bg; // Setting myAnimation to all layers
setContext(ctx, layerId)
Sets rendering context
bg;// or // bg.getLayer('myLayer').setContex(ctx);bg; // Setting ctx to all layers
draw(layerId)
Draws all visible figures, an all visible layers, on their contexts, or layer with selected id;
bg; // All visible layers have been renderedbg; // 'myLayer' has been rendered// or// bg.getLayer('myLayer').draw();
animate(layerId)
Animates all active layers, by applying layer's animation function to all figures on layer, or animates layer with selecter id.
bg; // All active layers have been animatedbg; // 'myLayer' has been animated// or// bg.getLayer('myLayer').animate(); bg; // All active layers have been animated and all visible are rendered
hide(layerId)
Makes layer with selected id invisible.
bg; // 'myLayer' is now invisible and won't be rendered;bg; // All layers is now invisible
show(layerId)
Makes layer with selected id visible.
bg; // 'myLayer' is now visible and will be rendered;bg; // All layers is now visible
stop(layerId)
Make layer with selected id inactive.
bg; // 'myLayer' is now inactive and won't be animatedbg; // All layers is now inactive
start(layerId)
Make layer with selected id active.
bgstart'myLayer'; // 'myLayer' is now inactive and will be animatedbgstart; // All layers is now active
getFigure(layerId, figureId)
Returns figure with this id;
bg; // => Figure{ ..., id: 'myFigure' };// or//bg.getLayer('myLayer').getFigure('myFigure');
Functions
apply(func, layerId)
Applies a function to the selected layer's figures object or to all layers' figures object.
func(figures, ctx, layerId)
-- Function with parametres [figures
- figures on layer,ctx
- layer context,layerId
- layer id]layerId
-- layer id
const someFunction = { // Do something with figures, context, layerId}bg; // someFunction will be applied to figures on 'myLayer'bg; // someFunction will be applied to figures on all layers
applyOnEach(func, layerId)
Applies a function to each figure on selected layer or to each figure on all layers.
func(f, i)
-- Function with parametres [f
- figure on layer,i
- iteratee]layerId
-- layer id
const someFunction = { // Do something with figure}bg; // someFunction will be applied to each figure on 'myLayer'bg; // someFunction will be applied to each figure on all layers
Pre-rendering frames
preRender(framesQuantity, cb, cbEvery, draw, save)
Prepare frames to render. That pre-renders selected quantity of frames, by animating itself.
framesQuantity
-- quantity of frames that will be preparedcb(i)
-- callback function [i
-- iteratee]cbEvery
-- That process takes time and CPU resources so you have to select how often you want to pause it and do callback, likecbEvery = 100
draw
-- will be Background render while preRendering [true
/false
]save
-- will be initial state of Background saved [true
/false
]
bg;// That will pre-render 1000 frames with callback and drawing it every 100 frame bg;// That will pre-render 1000 frames with callback every 100 frame, without drawing, the initian state will be saved, like there's wasn't any animation function calls on layers bg;// That will pre-render 1000 frames without any pausing for callback, so callback will be called only at the end// same as// bg.preRender(1000);// (999) => { /* do something */ }();
drawFrame(frame)
Renders selected frame.
bg; bg; // => First frame rendersbg; // => Last frame renders