Skip to content

♋ Interactive Particle / Nest System With JavaScript and Canvas, no jQuery.

License

Notifications You must be signed in to change notification settings

hustcc/canvas-nest.js

Repository files navigation

canvas-nest.js

A nest background of website draw on canvas. 中文 Readme 帮助文档.

npm npm npm gzip

screenshot

Feature

  • It does not depend on jQuery and original javascrpit is used.
  • Small size, only 2 Kb.
  • Easy to implement, simple configuration.
  • You do not have to be a web developer to use it.
  • Modularized with area rendering.

Install

# use npm
npm install --save canvas-nest.js

# or use yarn
yarn add canvas-nest.js

Usage

  • Script tag

Insert the code below between <body> and </body>.

<script src="dist/canvas-nest.js"></script>

Strongly suggest to insert before the tag </body>, as the following:

<html>
<head>
	...
</head>
<body>
	...
	...
	<script src="dist/canvas-nest.js"></script>
</body>
</html>

Then ok! Please do not add the code in the <head> </head>.

  • Modular usage (Area render)

After installation, you can import this as module.

There is only one API, use it as below:

import CanvasNest from 'canvas-nest.js';

const config = {
  color: '255,0,0',
  count: 88,
};

// Using config rendering effect at 'element'.
const cn = new CanvasNest(element, config);

// destroy
cn.destroy();

Configuration

  • color: color of lines, default: '0,0,0'; RGB values: (R,G,B).(note: use ',' to separate.)
  • pointColor: color of points, default: '0,0,0'; RGB values: (R,G,B).(note: use ',' to separate.)
  • opacity: the opacity of line (0~1), default: 0.5.
  • count: the number of lines, default: 99.
  • zIndex: z-index property of the background, default: -1.

Example:

  • Script tag
<script type="text/javascript" color="0,0,255" opacity='0.7' zIndex="-2" count="99" src="dist/canvas-nest.js"></script>
  • Modular usage (Area render)
{
  color: '0,0,255',
  opacity: 0.7,
  zIndex: -2,
  count: 99,
};

Note: If the Configuration isn't customized, default values are available as well.

Related projects

Used by

  • A Tool: a convenient tool box.

License

MIT@hustcc.