https://github.com/zyszys/vue-canvas-nest

:dizzy: A Vue.js background component for canvas-nest.
https://github.com/zyszys/vue-canvas-nest

canvas canvas-nest html5-canvas nest particles vue-components

Last synced: 3 months ago
JSON representation

:dizzy: A Vue.js background component for canvas-nest.

• Host: GitHub
• URL: https://github.com/zyszys/vue-canvas-nest
• Owner: ZYSzys
• License: mit
• Created: 2018-06-23T07:48:14.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2025-02-27T22:28:24.000Z (5 months ago)
• Last Synced: 2025-04-04T17:09:35.862Z (3 months ago)
• Topics: canvas, canvas-nest, html5-canvas, nest, particles, vue-components
• Language: Vue
• Homepage: http://zyszys.github.io/vue-canvas-nest/
• Size: 1.14 MB
• Stars: 167
• Watchers: 1
• Forks: 21
• Open Issues: 32
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# vue-canvas-nest

[![NPM version](https://img.shields.io/npm/v/vue-canvas-nest.svg?style=flat)](https://npmjs.org/package/vue-canvas-nest)

[![Travis CI](https://travis-ci.org/ZYSzys/vue-canvas-nest.svg?branch=master)](https://travis-ci.org/ZYSzys/vue-canvas-nest)

[![NPM downloads](http://img.shields.io/npm/dm/vue-canvas-nest.svg?style=flat)](https://npmjs.org/package/vue-canvas-nest)

[![NPM downloads](http://img.shields.io/npm/dt/vue-canvas-nest.svg?style=flat)](https://npmjs.org/package/vue-canvas-nest)

[![David Status](https://img.shields.io/david/ZYSzys/vue-canvas-nest.svg?style=flat)](https://github.com/ZYSzys/vue-canvas-nest/network/dependencies)

[![license](https://img.shields.io/github/license/ZYSzys/vue-canvas-nest.svg)](https://github.com/ZYSzys/vue-canvas-nest/blob/master/LICENSE)

[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)

> A Vue.js component for canvas-nest.

![screenshot](/screenshot.png)

## Install

``` bash

# install dependencies

npm i vue-canvas-nest

# or use yarn

yarn add vue-canvas-nest

```

## Usage

### Registe component

```js

import vueCanvasNest from 'vue-canvas-nest'

export default {

    components: { vueCanvasNest }

}

```

### How to use

#### Simply use

```html

```

#### With config or el(area render)

```html

```

## Config

 - **`color`**: the canvas line color, default: `'255,0,0'`; the color is (R,G,B).

 - **`opacity`**: the opacity of line (0~1), default: `0.7`.

 - **`count`**: the number of lines, default: `99`.

 - **`zIndex`**: the index of z space, default: `-1`.

 **Note: Render the whole page if no el passed by default.**

#### Example:

```js

const config = {

  color: '0,0,255',

  opacity: 0.7,

  zIndex: -2,

  count: 99,

};

```

## Contributors

- [ZYSzys](https://github.com/ZYSzys)

## Thanks

- [canvas-nest.js](https://github.com/hustcc/canvas-nest.js)

## License

[MIT](https://github.com/ZYSzys/vue-canvas-nest/blob/master/LICENSE).