https://github.com/renhongl/js-drawer

Javascript drawer tool
https://github.com/renhongl/js-drawer

canvas drawer javascript

Last synced: about 7 hours ago
JSON representation

Javascript drawer tool

• Host: GitHub
• URL: https://github.com/renhongl/js-drawer
• Owner: renhongl
• License: mit
• Created: 2020-02-24T06:27:40.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2022-12-12T02:32:42.000Z (about 2 years ago)
• Last Synced: 2024-12-26T12:36:13.063Z (about 1 month ago)
• Topics: canvas, drawer, javascript
• Language: JavaScript
• Homepage:
• Size: 2.62 MB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 24
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        

# js-drawer

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

If you like it, **[STAR](https://github.com/renhongl/js-drawer)** it please :)

Online demo: [Demo](https://renhongl.github.io/source/drawer/)

Source code: [Code](https://github.com/renhongl/js-drawer)

## Installation

* `npm install --save js-drawer`

## Example Code

```js

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\|#fff

setSize|Function|Set stroke size before draw next line|size\|20

setState|Function|Set stroke state before draw next line|state\|pen / pencil / rect

animate|Function|Make animation use exsiting graph||

## License

MIT