canvas-nest.js
A nest background of website draw on canvas. 中文 Readme 帮助文档.
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
npm install --save canvas-nest.js
yarn add canvas-nest.js
Usage
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,
};
const cn = new CanvasNest(element, config);
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 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.