js-drawer

Javascript drawer tool, use to draw something and animate it.

If you like it, STAR it please :)

Online demo: Demo

Source code: Code

Installation

• npm install --save js-drawer

Example Code

import Drawer from 'js-drawer';

const drawer = new Drawer({
    container: document.body,
    width: document.body.clientWidth,
    height: document.body.clientHeight,
    loop: 3000,
    size: 1,
    speed: 20,
    color: '#000000',
    toolBar: true,
});

drawer.setColor('red');
drawer.setSize('20');
drawer.setState('pencil');
setTimeout(() => {
    drawer.animate();
}, 5000);

Drawer configuration

Name	Type	Desc	Default	Required
container	DOM Object	DOM element	body	false
width	Number	Canvas width	400	false
height	Number	Canvas height	400	false
size	Number	Stroke size	1	false
color	String	Stroke color	#000000	false
speed	Number	Animation speed	20	false
loop	Number	Animation next loop waiting time	3000	false

Drawer API

Name	Type	Desc	Parameter	Param Example
setColor	Function	Set stroke color before draw next line	color<String>	#fff
setSize	Function	Set stroke size before draw next line	size<Number>	20
setState	Function	Set stroke state before draw next line	state<String>	pen / pencil / rect
animate	Function	Make animation use exsiting graph

License

MIT