1
1
# canvas-nest.js
2
2
3
- > A nest backgroud of website draw on canvas. [ 中文 Readme 帮助文档] ( README-zh.md ) .
3
+ > This background effect for web pages is drawn using tools based on html5 canvas. The final result is pretty awesome! [ 中文 Readme 帮助文档] ( README-zh.md ) .
4
4
5
5
[ ![ npm] ( https://img.shields.io/badge/demo-online-brightgreen.svg )] ( https://git.hust.cc/canvas-nest.js )
6
6
[ ![ npm] ( https://img.shields.io/npm/v/canvas-nest.js.svg )] ( https://www.npmjs.com/package/canvas-nest.js )
12
12
13
13
## Feature
14
14
15
- - No need jQuery.
16
- - Light, only 2 Kb.
17
- - Easy to use, even you are not a web developer.
18
- - Modular & area render.
15
+ - It does not depend on jQuery and original javascrpit is used.
16
+ - Small size, only 2 Kb.
17
+ - Easy to implement, simple configuration.
18
+ - You do not have to be a web developer to use it.
19
+ - Modularized with area rendering.
19
20
20
21
21
22
## Usage
@@ -28,7 +29,7 @@ Insert the code below `between <body> and </body>`.
28
29
<script src =" dist/canvas-nest.js" ></script >
29
30
```
30
31
31
- Suggest before the tag ` </body> ` , like below :
32
+ Strongly suggest to insert before the tag ` </body> ` , as the following :
32
33
33
34
``` html
34
35
<html >
@@ -46,13 +47,13 @@ Suggest before the tag `</body>`, like below:
46
47
Then ok! ` Please do not add the code in the <head> </head> ` .
47
48
48
49
49
- - Module usage (Area render)
50
+ - Modular usage (Area render)
50
51
51
52
> npm i --save canvas-nest.js
52
53
53
- Or import the ` umd ` package use ` script ` tag.
54
+ You could import ` umd ` packages with ` script ` tag or with modules .
54
55
55
- There is only one API, use it like :
56
+ There is only one API, use it as below :
56
57
57
58
``` js
58
59
import CanvasNest from ' canvas-nest.js' ;
@@ -62,28 +63,30 @@ const config = {
62
63
count: 88 ,
63
64
};
64
65
65
- // render nest on element with config .
66
+ // Using config rendering effect at 'element' .
66
67
const cn = new CanvasNest (element, config);
67
68
68
69
// destroy
69
70
cn .destroy ();
70
71
```
71
72
72
73
73
- ## Config
74
+ ## Configurations and settings
74
75
75
- - ** ` color ` ** : the canvas line color , default: ` '0,0,0' ` ; the color is (R,G,B).
76
+ - ** ` color ` ** : color of lines , default: ` '0,0,0' ` ; RGB values: (R,G,B).(note: use ',' to separate.)
76
77
- ** ` opacity ` ** : the opacity of line (0~ 1), default: ` 0.5 ` .
77
78
- ** ` count ` ** : the number of lines, default: ` 99 ` .
78
- - ** ` zIndex ` ** : the index of z space , default: ` -1 ` .
79
+ - ** ` zIndex ` ** : z- index property of the background , default: ` -1 ` .
79
80
80
81
Example:
81
82
82
83
``` html
83
84
<script type =" text/javascript" color =" 0,0,255" opacity =' 0.7' zIndex =" -2" count =" 99" src =" dist/canvas-nest.js" ></script >
84
85
```
85
86
86
- Or
87
+ These property configuration settings are in the js script tag as its property values. If these settings are not customized, default values are available as well.
88
+
89
+ With modules,use config values as below:
87
90
88
91
``` js
89
92
{
103
106
104
107
## Used by
105
108
106
- - [ A Tool] ( https://atools.vip/ ) : Tools for human .
109
+ - [ A Tool] ( https://atools.vip/ ) : a convenient tool box .
107
110
108
111
109
112
0 commit comments