A nest backgroud of website draw on canvas. 中文 Readme 帮助文档.
npm i --save canvas-nest.js
- No need jQuery.
- Light, only 2 Kb.
- Easy to use, even you are not a web developer.
- Modular & area render.
- Script tag
Insert the code below between <body> and </body>.
<script src="dist/canvas-nest.js"></script>Suggest before the tag </body>, like below:
<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>.
- Module usage (Area render)
npm i --save canvas-nest.js
Or import the umd package use script tag.
There is only one API, use it like:
import CanvasNest from 'canvas-nest.js';
const config = {
color: '255,0,0',
count: 88,
};
// render nest on element with config.
const cn = new CanvasNest(element, config);
// destroy
cn.destroy();color: the canvas line color, default:'0,0,0'; the color is (R,G,B).opacity: the opacity of line (0~1), default:0.5.count: the number of lines, default:99.zIndex: the index of z space, default:-1.
Example:
<script type="text/javascript" color="0,0,255" opacity='0.7' zIndex="-2" count="99" src="dist/canvas-nest.js"></script>Or
{
color: '0,0,255',
opacity: 0.7,
zIndex: -2,
count: 99,
};- canvas-nest-for-wp: a wordpress plugin, search
canvas-nestin wordpress store. - vue-canvas-nest: vue component wrapper.
- A Tool: Tools for human.
MIT@hustcc.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent