All Projects → ZYSzys → Vue Canvas Nest

ZYSzys / Vue Canvas Nest

Licence: mit
💫 A Vue.js background component for canvas-nest.

Projects that are alternatives of or similar to Vue Canvas Nest

Canvas Nest.js
♋ Interactive Particle / Nest System With JavaScript and Canvas, no jQuery.
Stars: ✭ 3,966 (+2816.18%)
Mutual labels:  particles, html5-canvas, canvas
Cheetah Grid
The fastest open-source data table for web.
Stars: ✭ 417 (+206.62%)
Mutual labels:  vue-components, canvas
React Particles Webgl
🔆 A 2D/3D particle library built on React, Three.js and WebGL
Stars: ✭ 330 (+142.65%)
Mutual labels:  particles, canvas
Canvas Test
🎮 happy canvas
Stars: ✭ 1,722 (+1166.18%)
Mutual labels:  particles, canvas
Phaser Examples
Contains hundreds of source code examples and related media for the Phaser HTML5 Game Framework.
Stars: ✭ 1,680 (+1135.29%)
Mutual labels:  particles, canvas
Canvas
HTML5 Canvas API implementation for Microsoft Blazor
Stars: ✭ 319 (+134.56%)
Mutual labels:  html5-canvas, canvas
Canvas101
Learning Canvas series
Stars: ✭ 28 (-79.41%)
Mutual labels:  html5-canvas, canvas
Black
World's fastest HTML5 2D game engine   🛸
Stars: ✭ 174 (+27.94%)
Mutual labels:  particles, canvas
Chaos In Javascript
I was always intrigued to see how math is so beautiful. Thanks to JavaScript for giving me the power to program my curiosity and explore the beauty of chaos in math.
Stars: ✭ 38 (-72.06%)
Mutual labels:  html5-canvas, canvas
Icon Machine
Web application for randomly generating pixel art icons.
Stars: ✭ 73 (-46.32%)
Mutual labels:  html5-canvas, canvas
React Particle Effect Button
Bursting particle effect buttons for React 🎉
Stars: ✭ 1,385 (+918.38%)
Mutual labels:  particles, canvas
awesome-canvas
Canvas资源库大全中文版。An awesome Canvas packages and resources.
Stars: ✭ 288 (+111.76%)
Mutual labels:  canvas, html5-canvas
Disintegrate
A small JS library to break DOM elements into animated Canvas particles.
Stars: ✭ 251 (+84.56%)
Mutual labels:  particles, canvas
Konfetti
Celebrate more with this lightweight confetti particle system 🎊
Stars: ✭ 2,278 (+1575%)
Mutual labels:  particles, canvas
Vue Graph
⚡️ Vue components based on the JUI chart available in Vue.js
Stars: ✭ 114 (-16.18%)
Mutual labels:  vue-components, canvas
Origami.js
Powerful and Lightweight Library to create using HTML5 Canvas
Stars: ✭ 750 (+451.47%)
Mutual labels:  html5-canvas, canvas
Proton
Javascript particle animation library
Stars: ✭ 1,958 (+1339.71%)
Mutual labels:  particles, canvas
Layaair discard
This is old LayaAir veriosn writetten by ActionScript 3.0 ,now LayaAir is using TypeScript as the Engine Script,Please use https://github.com/layabox/LayaAir instead.
Stars: ✭ 1,858 (+1266.18%)
Mutual labels:  particles, canvas
Awesome Canvas
A curated list of awesome HTML5 Canvas with examples, related articles and posts.
Stars: ✭ 963 (+608.09%)
Mutual labels:  particles, html5-canvas
The Matrix Effect
The incredible effect of rain of letters in the style of the Matrix trilogy.
Stars: ✭ 109 (-19.85%)
Mutual labels:  html5-canvas, canvas

vue-canvas-nest

NPM version Travis CI NPM downloads NPM downloads David Status license PRs Welcome

A Vue.js component for canvas-nest.

screenshot

Install

# install dependencies
npm i vue-canvas-nest

# or use yarn
yarn add vue-canvas-nest

Usage

Registe component

import vueCanvasNest from 'vue-canvas-nest'
export default {
    components: { vueCanvasNest }
}

How to use

Simply use

<vue-canvas-nest></vue-canvas-nest>

With config or el(area render)

<vue-canvas-nest :config="{color:'255,0,0', count: 88}" :el="'#area'"></vue-canvas-nest>

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:

const config = {
  color: '0,0,255',
  opacity: 0.7,
  zIndex: -2,
  count: 99,
};

Contributors

Thanks

License

MIT.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].