wavy-canvas
Version:
Create a wave animation on the canvas
127 lines (92 loc) • 3.51 kB
Markdown
# Wavy Canvas
[](https://badge.fury.io/js/wavy-canvas) [](https://badge.fury.io/gh/hinok%2Fwavy-canvas)
Small library which gives you ability to create a wave animation on the `<canvas>`.
Includes `hidpi-canvas-polyfill` ([src](https://github.com/jondavidjohn/hidpi-canvas-polyfill)) by @jondavidjohn
Can be easily used in AMD / CommonJS / ES6 / legacy environments.
## _"A picture is worth a thousand words"_
## Demo
Open <http://codepen.io/hinok/pen/xOwrKJ>
## Usage
### Options
You must set at least either `selector` or `selectorEl` option and `radiuses`, `duration` options.
```javascript
var wavy = new Wavy(options);
```
- `hexFillColor`, {string}, defaults `#ff0000`, optional - Background hex color of waves
- `hexStrokeColor` {string}, defaults `inherits from hexFillColor`, optional - Stroke hex color of waves
- `onlyWaves` {boolean}, defaults `false`, optional - Whether should render only waves with transparent background or not
- `radiuses` {Array}, required - Next radiuses of rendered waves
- `duration` {number}, required - How long waves animation should take in ms (mili seconds)
- `selector` {string}, optional - A selector of a DOM element where `<canvas>` should be appended.
- `selectorEl` {Element}, optional - A DOM element where `<canvas>` should be appended. Overrides `selector` option
- `centerWaveSelector` {string}, defaults `.js-wavy-center`, optional - A selector of a DOM element which set center (source) of waves. Must be a child of DOM element set by properties: `selector` or `selectorEl`
- `centerWave` {Object}, optional - An object containing props `x`, `y` which indicate center of waves. Overrides `centerWaveSelector` option.
**Regular usage**
```javascript
new Wavy({
hexStrokeColor: '#fff',
radiuses: [10, 20, 30],
duration: 3000,
selector: '.js-dom-element'
});
```
**All options**
```javascript
new Wavy({
hexFillColor: '#fff',
hexStrokeColor: '#fff',
onlyWaves: false,
radiuses: [10, 20, 30],
duration: 5000,
selector: '.js-dom-element',
selectorEl: document.querySelector('.js-other-dom-element'),
centerWave: {
x: 500,
y: 500
},
centerWaveSelector: '.js-child-of-dom-element'
});
```
For more details look at `demo` folder.
### ES2015 / ES6
```javascript
import Wavy from 'wavy-canvas/src/Wavy';
const wavy = new Wavy({
radiuses: [10, 30, 50, 80, 120, 160, 200, 280],
hexFillColor: '#fff',
hexStrokeColor: '#fff',
duration: 4000,
selector: '.js-where-should-I-append-canvas-element'
});
wavy.start();
```
### ES5
```javascript
var wavy = new window.Wavy({
radiuses: [10, 30, 50, 80, 120, 160, 200, 280],
hexFillColor: '#fff',
hexStrokeColor: '#fff',
duration: 4000,
selector: '.js-where-should-I-append-canvas-element'
});
wavy.start();
```
## Size
### Javascript
wavy.js | wavy.js (gzip) | wavy.min.js | wavy.min.js (gzip)
-------- | -------------- | ----------- | ------------------
33.94 KB | 8.64 KB | 16.47 KB | 5.19 KB
### CSS
style.css | style.css (gzip)
--------- | ----------------
327 B | 205 B
0.33 KB | 0.21 KB
## Development
```bash
npm install # quite obvious... ¯\_( ͠° ͟ʖ °͠ )_/¯
npm start # starts server, opens browser, watches for files changes
npm run build # build js and scss
```
## License
MIT