hustcc/canvas-nest.js

JavaScriptgit.hust.cc/canvas-nest.js

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

canvascanvas-nestjavascriptparticleshtml5html5-canvas

关键指标

Star 增长趋势

Star

4.3k

Forks

809

周增长

—

Issues

2k4k

2015年12月2017年9月2019年6月2021年3月2023年1月2024年10月2026年7月

制品库npmnpm install canvas-nest.js

README

canvas-nest.js

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

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.

canvas-nest-for-wp: a wordpress plugin, search canvas-nest in wordpress store.
vue-canvas-nest: vue component wrapper.
react-canvas-nest: react component wrapper.
canvas-nest-for-vscode: a vscode extensions, search nest in vscode extensions.

Used by

A Tool: a convenient tool box.

License

MIT@hustcc.