Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

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: about 1 month 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 (almost 6 years ago)
Default Branch: master
Last Pushed: 2024-04-03T18:47:37.000Z (about 2 months ago)
Last Synced: 2024-04-03T20:01:59.681Z (about 2 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: 165
Watchers: 2
Forks: 20
Open Issues: 32
Metadata Files:
- Readme: README.md
- License: LICENSE

Lists

awesome-vue - vue-canvas-nest - A Vue.js component for canvas-nest. (Components & Libraries / UI Components)
awesome-vue - vue-canvas-nest - A Vue.js component for canvas-nest. (Components & Libraries / UI Components)
awesome-vue - vue-canvas-nest - A Vue.js component for canvas-nest. (Components & Libraries / UI Components)
awesome-vue - vue-canvas-nest - A Vue.js component for canvas-nest. (Components & Libraries / UI Components)
awesome-vue - vue-canvas-nest - A Vue.js component for canvas-nest. (Components & Libraries / UI Components)
awesome-vue - vue-canvas-nest - A Vue.js component for canvas-nest. (Components & Libraries / UI Components)
awesome-vue - vue-canvas-nest - A Vue.js component for canvas-nest. (Components & Libraries / UI Components)
awesome-vue - vue-canvas-nest - A Vue.js component for canvas-nest. (Components & Libraries / UI Components)
awesome-vue - vue-canvas-nest - A Vue.js component for canvas-nest. (Components & Libraries / UI Components)
awesome-vue - vue-canvas-nest - A Vue.js component for canvas-nest. (UI Components / Canvas)
awesome-vue - vue-canvas-nest - A Vue.js component for canvas-nest. (UI Components / Canvas)
awesome-vue - vue-canvas-nest - A Vue.js component for canvas-nest. (Components & Libraries / UI Components)
awesome-vue - vue-canvas-nest ★51 - A Vue.js component for canvas-nest. (UI Components / Canvas)

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).