A nest background of website draw on canvas. 中文 Readme 帮助文档.
- 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.
# use npm npm install --save canvas-nest.js # or use yarn yarn add canvas-nest.js
- 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();
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-nestin wordpress store. - vue-canvas-nest: vue component wrapper.
- react-canvas-nest: react component wrapper.
- canvas-nest-for-vscode: a vscode extensions, search
nestin vscode extensions.
- A Tool: a convenient tool box.
MIT@hustcc.