Skip to content

Commit 2fdc9ef

Browse files
hustcchustcc
committed
module & area render
1 parent 8b3571b commit 2fdc9ef

23 files changed

+691
-346
lines changed

‎.babelrc

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
{
2+
"env": {
3+
"rollup": {
4+
"presets": [
5+
[
6+
"env",
7+
{
8+
"modules": false
9+
}
10+
]
11+
],
12+
"plugins": [
13+
"transform-class-properties",
14+
"transform-object-rest-spread"
15+
]
16+
},
17+
"babel": {
18+
"presets": ["env"],
19+
"plugins": [
20+
"transform-class-properties",
21+
"add-module-exports",
22+
"transform-object-rest-spread"
23+
]
24+
}
25+
}
26+
}

‎.gitignore

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
.project
22
.settings
3-
3+
.idea
44
node_modules/*
55

‎.jshintrc

-13
This file was deleted.

‎.travis.yml

-3
This file was deleted.

‎README-zh.md

+46-14
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,27 @@
11
# canvas-nest.js
22

3-
> 一个基于html5 canvas绘制的网页背景效果，非常赞！如果需要 `wordpress插件`，在插件库搜索 `canvas-nest` 或者看看项目 [canvas-nest-for-wp](https://github.com/aTool-org/canvas-nest-for-wp)。
3+
> 一个基于 html5 canvas 绘制的网页背景效果，非常赞！如果需要 `wordpress插件`，在插件库搜索 `canvas-nest` 或者看看项目 [canvas-nest-for-wp](https://github.com/aTool-org/canvas-nest-for-wp)。
44
5-
![travis-ci](https://travis-ci.org/hustcc/canvas-nest.js.svg?branch=master) ![npm](https://img.shields.io/npm/v/canvas-nest.js.svg?style=flat-square) ![npm](https://img.shields.io/npm/l/canvas-nest.js.svg?style=flat-square)
5+
[![npm](https://img.shields.io/badge/demo-online-brightgreen.svg)](https://git.hust.cc/canvas.nest.js)
6+
![npm](https://img.shields.io/npm/v/canvas-nest.js.svg)
7+
![npm](https://img.shields.io/npm/dm/canvas-nest.js.svg)
68

79

810
## 特性
911

10-
- 不依赖任何框架或者类库，比如不依赖 jQuery，使用原生的 javascript。
11-
- 非常小，只有1.6 kb，如果开启 gzip，可以更小。
12-
- 非常容易实现，配置简单，即使你不是web开发者，也能简单搞定。
12+
- 不依赖 jQuery，使用原生的 javascript。
13+
- 非常小，只有 2 Kb。
14+
- 非常容易实现，配置简单，即使你不是 web 开发者，也能简单搞定。
1315

1416

1517
## 使用
1618

17-
使用非常简单，感觉都没有必要写这一节内容。
19+
- 快捷使用
1820

1921
将下面的代码插入到 `<body> 和 </body> 之间`.
2022

2123
```html
22-
<script type="text/javascript" src="//cdn.bootcss.com/canvas-nest.js/1.0.1/canvas-nest.min.js"></script>
24+
<script type="text/javascript" src="//cdn.bootcss.com/canvas-nest.js/x.x.x/canvas-nest.js"></script>
2325
```
2426

2527
强烈建议在 `</body>`标签上方. 例如下面的代码结构:
@@ -32,15 +34,31 @@
3234
<body>
3335
...
3436
...
35-
...
36-
<script type="text/javascript" src="//cdn.bootcss.com/canvas-nest.js/1.0.1/canvas-nest.min.js"></script>
37+
<script type="text/javascript" src="//cdn.bootcss.com/canvas-nest.js/x.x.x/canvas-nest.js"></script>
3738
</body>
3839
</html>
3940
```
4041

41-
`请注意不要将代码置于 <head> </head>里面`.
42+
然后就完成了，打开网页即可看到效果!`请注意不要将代码置于 <head> </head>里面`.
43+
44+
45+
- 模块化区域绘制（定制开发）
46+
47+
> npm i --save canvas-nest.js
48+
49+
然后可以使用 script 方式引入 umd 包，当然也可使用模块化方式 import。并且只有一个 API，使用如下：
50+
51+
```
52+
import CanvasNest from 'canvas-nest.js';
53+
54+
const config = {
55+
color: '255,0,0',
56+
count: 88,
57+
};
4258
43-
然后就完成了，打开网页即可看到效果!
59+
// 在 element 地方使用 config 渲染效果
60+
new CanvasNest(element, config);
61+
```
4462

4563

4664
## 配置和配置项
@@ -54,11 +72,22 @@
5472
Example:
5573

5674
```
57-
<script type="text/javascript" color="0,0,255" opacity='0.7' zIndex="-2" count="99" src="//cdn.bootcss.com/canvas-nest.js/1.0.1/canvas-nest.min.js"></script>
75+
<script type="text/javascript" color="0,0,255" opacity='0.7' zIndex="-2" count="99" src="//cdn.bootcss.com/canvas-nest.js/x.x.x/canvas-nest.js"></script>
5876
```
5977

6078
这些属性配置在引用js的script标签中，作为它的一个属性值。所有的配置项都有默认值，如果你不知道怎么设置，可以先不设置这些配置项，就使用默认值看看效果也可以的。
6179

80+
或者模块化调用的时候，写成：
81+
82+
```js
83+
{
84+
color: '0,0,255',
85+
opacity: 0.7,
86+
zIndex: -2,
87+
count: 99,
88+
};
89+
```
90+
6291

6392
## 示例
6493

@@ -71,6 +100,9 @@ Example:
71100

72101
## 其他
73102

74-
本项目的Javascript文件已经存储在CDN上，可以直接使用，地址为： [http://www.bootcdn.cn/canvas-nest.js/](http://www.bootcdn.cn/canvas-nest.js/)，如果你不需要 CDN 或者有自己的 CDN，可以直接下载源码 dist 目录中的 `canvas-nest.min.js`，然后相应的修改使用地址即可。
103+
本项目的 Javascript 文件已经存储在 CDN 上，可以直接使用，地址为： [http://www.bootcdn.cn/canvas-nest.js/](http://www.bootcdn.cn/canvas-nest.js/)，如果你不需要 CDN 或者有自己的 CDN，可以直接下载源码 dist 目录中的 `canvas-nest.js`，然后相应的修改使用地址即可。
104+
105+
106+
## License
75107

76-
有任何的bug或者建议，非常鼓励 issue 和 pr，来者不拒。
108+
MIT@[hustcc](https://github.com/hustcc).

‎README.md

+57-22
Original file line numberDiff line numberDiff line change
@@ -2,28 +2,29 @@
22

33
> A nest backgroud of website draw on canvas. [中文Readme帮助文档](https://github.com/hustcc/canvas-nest.js/blob/master/README-zh.md). For `wordpress plugin`, search `canvas-nest` or see [canvas-nest-for-wp](https://github.com/aTool-org/canvas-nest-for-wp).
44
5-
![travis-ci](https://travis-ci.org/hustcc/canvas-nest.js.svg?branch=master) ![npm](https://img.shields.io/npm/v/canvas-nest.js.svg?style=flat-square) ![npm](https://img.shields.io/npm/l/canvas-nest.js.svg?style=flat-square)
5+
[![npm](https://img.shields.io/badge/demo-online-brightgreen.svg)](https://git.hust.cc/canvas.nest.js)
6+
![npm](https://img.shields.io/npm/v/canvas-nest.js.svg)
7+
![npm](https://img.shields.io/npm/dm/canvas-nest.js.svg)
68

79

10+
## Feature
811

9-
## feature
12+
- No need jQuery.
13+
- Light, only 2 Kb.
14+
- Easy to use, even you are not a web developer.
1015

11-
- do not depend on jQuery or other javascript framework.
12-
- very light, only 1.6 kb. can be smaller after gzip.
13-
- so easy to use, even you are not a web developer.
1416

17+
## Usage
1518

16-
## usage
19+
- Script tag
1720

18-
so eazy that I do not want write the chapter.
19-
20-
insert the code below `between <body> and </body>`.
21+
Insert the code below `between <body> and </body>`.
2122

2223
```html
23-
<script src="//cdn.bootcss.com/canvas-nest.js/1.0.1/canvas-nest.min.js"></script>
24+
<script src="//cdn.bootcss.com/canvas-nest.js/x.x.x/canvas-nest.js"></script>
2425
```
2526

26-
suggest before the tag `</body>`. like below:
27+
Suggest before the tag `</body>`, like below:
2728

2829
```html
2930
<html>
@@ -33,19 +34,36 @@ suggest before the tag `</body>`. like below:
3334
<body>
3435
...
3536
...
36-
...
37-
<script src="//cdn.bootcss.com/canvas-nest.js/1.0.1/canvas-nest.min.js"></script>
37+
<script src="//cdn.bootcss.com/canvas-nest.js/x.x.x/canvas-nest.js"></script>
3838
</body>
3939
</html>
4040
```
4141

42+
Then ok! `Please do not add the code in the <head> </head>`.
43+
44+
45+
- Module usage (Area render)
46+
47+
> npm i --save canvas-nest.js
48+
49+
Or import the `umd` package use `script` tag.
50+
51+
There is only one API, use it like:
52+
53+
```
54+
import CanvasNest from 'canvas-nest.js';
4255
43-
`please do not add the code in the <head> </head>`.
56+
const config = {
57+
color: '255,0,0',
58+
count: 88,
59+
};
4460
45-
then ok!
61+
// render nest on element with config.
62+
new CanvasNest(element, config);
63+
```
4664

4765

48-
## config
66+
## Config
4967

5068
- **`color`**: the canvas line color, default: `'0,0,0'` ; the color is (R,G,B)
5169
- **`opacity`**: the opacity of line (0~1), default: `0.5`
@@ -55,23 +73,40 @@ then ok!
5573
Example:
5674

5775
```html
58-
<script type="text/javascript" color="0,0,255" opacity='0.7' zIndex="-2" count="99" src="//cdn.bootcss.com/canvas-nest.js/1.0.1/canvas-nest.min.js"></script>
76+
<script type="text/javascript" color="0,0,255" opacity='0.7' zIndex="-2" count="99" src="//cdn.bootcss.com/canvas-nest.js/x.x.x/canvas-nest.js"></script>
77+
```
78+
79+
Or
80+
81+
```js
82+
{
83+
color: '0,0,255',
84+
opacity: 0.7,
85+
zIndex: -2,
86+
count: 99,
87+
};
5988
```
6089

6190
set the config on the script node `as a attribute`. all the config has the default value, you can choose to set any of them.
6291

6392

64-
## preview
93+
## Preview
6594

6695
1. [Online Tools: https://atool.vip/](https://atool.vip/)
6796

68-
if you has used this project, pls let me know, I can add your website on.
97+
98+
If you has used this project, you can send pr and write it here.
99+
69100

70101
![screenshot](https://raw.githubusercontent.com/hustcc/canvas-nest.js/master/screenshot.png)
71102

72103

73-
## other
104+
## Other
105+
106+
Library cdn url: [http://www.bootcdn.cn/canvas-nest.js/](http://www.bootcdn.cn/canvas-nest.js/).
107+
108+
74109

75-
Project library cdn url: [http://www.bootcdn.cn/canvas-nest.js/](http://www.bootcdn.cn/canvas-nest.js/).
110+
## License
76111

77-
any bug or question, welcome to push request and issue.
112+
MIT@[hustcc](https://github.com/hustcc).

0 commit comments

Comments
 (0)