Skip to content

Commit 7c96a04

Browse files
hustcchustcc
committed
update README
1 parent 3409414 commit 7c96a04

File tree

2 files changed

+32
-49
lines changed

2 files changed

+32
-49
lines changed

‎README-zh.md‎

Lines changed: 16 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,20 @@
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 绘制的网页背景效果，非常赞！
44
55
[![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)
6+
[![npm](https://img.shields.io/npm/v/canvas-nest.js.svg)](https://www.npmjs.com/package/canvas-nest.js)
7+
[![npm](https://img.shields.io/npm/dm/canvas-nest.js.svg)](https://www.npmjs.com/package/canvas-nest.js)
88

9-
> npm i --save canvas-nest.js
9+
> **npm i --save canvas-nest.js**
1010
1111

1212
## 特性
1313

1414
- 不依赖 jQuery，使用原生的 javascript。
1515
- 非常小，只有 2 Kb。
1616
- 非常容易实现，配置简单，即使你不是 web 开发者，也能简单搞定。
17-
- 模块化 & 区域徐然。
17+
- 模块化 & 区域渲染。
1818

1919

2020
## 使用
@@ -24,7 +24,7 @@
2424
将下面的代码插入到 `<body> 和 </body> 之间`.
2525

2626
```html
27-
<script type="text/javascript" src="//cdn.bootcss.com/canvas-nest.js/x.x.x/canvas-nest.js"></script>
27+
<script type="text/javascript" src="dist/canvas-nest.js"></script>
2828
```
2929

3030
强烈建议在 `</body>`标签上方. 例如下面的代码结构:
@@ -37,7 +37,7 @@
3737
<body>
3838
...
3939
...
40-
<script type="text/javascript" src="//cdn.bootcss.com/canvas-nest.js/x.x.x/canvas-nest.js"></script>
40+
<script type="text/javascript" src="dist/canvas-nest.js"></script>
4141
</body>
4242
</html>
4343
```
@@ -49,7 +49,7 @@
4949

5050
> npm i --save canvas-nest.js
5151
52-
然后可以使用 script 方式引入 umd 包，当然也可使用模块化方式 import。
52+
然后可以使用 script 方式引入 umd 包，当然也可使用模块化方式 import。
5353

5454
并且只有一个 API，使用如下：
5555

@@ -68,9 +68,6 @@ const cn = new CanvasNest(element, config);
6868
cn.destroy();
6969
```
7070

71-
作为Vue组件使用:
72-
- [vue-canvas-nest](https://github.com/ZYSzys/vue-canvas-nest)
73-
7471

7572
## 配置和配置项
7673

@@ -83,12 +80,12 @@ cn.destroy();
8380
Example:
8481

8582
```html
86-
<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>
83+
<script type="text/javascript" color="0,0,255" opacity='0.7' zIndex="-2" count="99" src="dist/canvas-nest.js"></script>
8784
```
8885

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

91-
或者模块化调用的时候，写成：
88+
或者模块化调用的时候，config 参数写成：
9289

9390
```js
9491
{
@@ -100,18 +97,15 @@ Example:
10097
```
10198

10299

103-
## 示例
104-
105-
1. [在线工具: https://atool.vip/](https://atool.vip/)
106-
107-
如果你使用的了本项目，也可以修改此处文件，并 pr，我会接受的。
100+
## 相关项目
108101

109-
![screenshot](https://raw.githubusercontent.com/hustcc/canvas-nest.js/master/screenshot.png)
102+
- [canvas-nest-for-wp](https://github.com/aTool-org/canvas-nest-for-wp): WP 插件，在插件市场搜索 `canvas-nest` 即可安装。
103+
- [vue-canvas-nest](https://github.com/ZYSzys/vue-canvas-nest): VUE 组件包装。
110104

111105

112-
## 其他
106+
## 使用项目
113107

114-
本项目的 Javascript 文件已经存储在 CDN 上，可以直接使用，地址为： [http://www.bootcdn.cn/canvas-nest.js/](http://www.bootcdn.cn/canvas-nest.js/)，如果你不需要 CDN 或者有自己的 CDN，可以直接下载源码 dist 目录中的 `canvas-nest.js`，然后相应的修改使用地址即可。
108+
- [A Tool](https://atools.vip/): 一个好用的工具集合.
115109

116110

117111
## License

‎README.md‎

Lines changed: 16 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
# canvas-nest.js
22

3-
> 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).
3+
> A nest backgroud of website draw on canvas. [中文 Readme 帮助文档](README-zh.md).
44
55
[![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)
6+
[![npm](https://img.shields.io/npm/v/canvas-nest.js.svg)](https://www.npmjs.com/package/canvas-nest.js)
7+
[![npm](https://img.shields.io/npm/dm/canvas-nest.js.svg)](https://www.npmjs.com/package/canvas-nest.js)
88

9-
> npm i --save canvas-nest.js
9+
> **npm i --save canvas-nest.js**
1010
1111

1212
## Feature
@@ -24,7 +24,7 @@
2424
Insert the code below `between <body> and </body>`.
2525

2626
```html
27-
<script src="//cdn.bootcss.com/canvas-nest.js/x.x.x/canvas-nest.js"></script>
27+
<script src="dist/canvas-nest.js"></script>
2828
```
2929

3030
Suggest before the tag `</body>`, like below:
@@ -37,7 +37,7 @@ Suggest before the tag `</body>`, like below:
3737
<body>
3838
...
3939
...
40-
<script src="//cdn.bootcss.com/canvas-nest.js/x.x.x/canvas-nest.js"></script>
40+
<script src="dist/canvas-nest.js"></script>
4141
</body>
4242
</html>
4343
```
@@ -68,22 +68,18 @@ const cn = new CanvasNest(element, config);
6868
cn.destroy();
6969
```
7070

71-
Use as Vue component:
72-
- [vue-canvas-nest](https://github.com/ZYSzys/vue-canvas-nest)
73-
74-
7571

7672
## Config
7773

78-
- **`color`**: the canvas line color, default: `'0,0,0'` ; the color is (R,G,B)
79-
- **`opacity`**: the opacity of line (0~1), default: `0.5`
80-
- **`count`**: the number of lines, default: `150`
81-
- **`zIndex`**: the index of z space, default: `-1`
74+
- **`color`**: the canvas line color, default: `'0,0,0'`; the color is (R,G,B).
75+
- **`opacity`**: the opacity of line (0~1), default: `0.5`.
76+
- **`count`**: the number of lines, default: `99`.
77+
- **`zIndex`**: the index of z space, default: `-1`.
8278

8379
Example:
8480

8581
```html
86-
<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>
82+
<script type="text/javascript" color="0,0,255" opacity='0.7' zIndex="-2" count="99" src="dist/canvas-nest.js"></script>
8783
```
8884

8985
Or
@@ -97,23 +93,16 @@ Or
9793
};
9894
```
9995

100-
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.
101-
102-
103-
## Preview
104-
105-
1. [Online Tools: https://atool.vip/](https://atool.vip/)
106-
107-
108-
If you has used this project, you can send pr and write it here.
10996

97+
## Related projects
11098

111-
![screenshot](https://raw.githubusercontent.com/hustcc/canvas-nest.js/master/screenshot.png)
99+
- [canvas-nest-for-wp](https://github.com/aTool-org/canvas-nest-for-wp): a wordpress plugin, search `canvas-nest` in wordpress store.
100+
- [vue-canvas-nest](https://github.com/ZYSzys/vue-canvas-nest): vue component wrapper.
112101

113102

114-
## Other
103+
## Used by
115104

116-
Library cdn url: [http://www.bootcdn.cn/canvas-nest.js/](http://www.bootcdn.cn/canvas-nest.js/).
105+
- [A Tool](https://atools.vip/): Tools for human.
117106

118107

119108

0 commit comments

Comments
 (0)