Skip to content

Commit 533841a

Browse files
ZYSzysZYSzys
authored
chore: tweak docs (hustcc#44)
* chore: tweak docs * screenshot * fix links
1 parent eee6196 commit 533841a

File tree

3 files changed

+38
-21
lines changed

3 files changed

+38
-21
lines changed

‎README-zh.md

+18-10
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,22 @@
11
# canvas-nest.js
22

3-
> 一个基于 html5 canvas 绘制的网页背景效果，非常赞！
3+
> 一个基于 html5 canvas 绘制的网页背景效果。
44
55
[![npm](https://img.shields.io/badge/demo-online-brightgreen.svg)](https://git.hust.cc/canvas-nest.js)
66
[![npm](https://img.shields.io/npm/v/canvas-nest.js.svg)](https://www.npmjs.com/package/canvas-nest.js)
77
[![npm](https://img.shields.io/npm/dm/canvas-nest.js.svg)](https://www.npmjs.com/package/canvas-nest.js)
88
[![gzip](http://img.badgesize.io/https://unpkg.com/canvas-nest.js/dist/canvas-nest.js?compression=gzip)](https://unpkg.com/canvas-nest.js/dist/canvas-nest.js)
99

10-
> **npm i --save canvas-nest.js**
10+
![screenshot](/screenshot.png)
1111

12+
## 安装
13+
```sh
14+
# 使用 npm
15+
npm install --save canvas-nest.js
16+
17+
# 或者使用 yarn
18+
yarn add canvas-nest.js
19+
```
1220

1321
## 特性
1422

@@ -48,9 +56,7 @@
4856

4957
- 模块化区域绘制（定制开发）
5058

51-
> npm i --save canvas-nest.js
52-
53-
然后可以使用 script 方式引入 umd 包，当然也可使用模块化方式 import。
59+
完成安装好，可以使用模块化方式 import。
5460

5561
并且只有一个 API，使用如下：
5662

@@ -70,7 +76,7 @@ cn.destroy();
7076
```
7177

7278

73-
## 配置和配置项
79+
## 配置
7480

7581
- **`color`**: 线条颜色, 默认: `'0,0,0'` ；三个数字分别为(R,G,B)，注意用,分割
7682
- **`opacity`**: 线条透明度（0~1）, 默认: `0.5`
@@ -80,13 +86,13 @@ cn.destroy();
8086

8187
Example:
8288

89+
- 快捷使用
90+
8391
```html
8492
<script type="text/javascript" color="0,0,255" opacity='0.7' zIndex="-2" count="99" src="dist/canvas-nest.js"></script>
8593
```
8694

87-
这些属性配置在引用 js 的 script 标签中，作为它的一个属性值。所有的配置项都有默认值，如果你不知道怎么设置，可以先不设置这些配置项，就使用默认值看看效果也可以的。
88-
89-
或者模块化调用的时候，config 参数写成：
95+
- 模块化区域绘制（定制开发）
9096

9197
```js
9298
{
@@ -97,6 +103,8 @@ Example:
97103
};
98104
```
99105

106+
**注意: 所有的配置项都有默认值，如果你不知道怎么设置，可以先不设置这些配置项，就使用默认值看看效果也可以的。**
107+
100108

101109
## 相关项目
102110

@@ -106,7 +114,7 @@ Example:
106114

107115
## 使用项目
108116

109-
- [A Tool](https://atools.vip/): 一个好用的工具集合.
117+
- [A Tool](https://atool.vip): 一个好用的工具集合.
110118

111119

112120
## License

‎README.md

+20-11
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,13 @@
11
# canvas-nest.js
22

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).
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)
66
[![npm](https://img.shields.io/npm/v/canvas-nest.js.svg)](https://www.npmjs.com/package/canvas-nest.js)
77
[![npm](https://img.shields.io/npm/dm/canvas-nest.js.svg)](https://www.npmjs.com/package/canvas-nest.js)
88
[![gzip](http://img.badgesize.io/https://unpkg.com/canvas-nest.js/dist/canvas-nest.js?compression=gzip)](https://unpkg.com/canvas-nest.js/dist/canvas-nest.js)
99

10-
> **npm i --save canvas-nest.js**
11-
10+
![screenshot](/screenshot.png)
1211

1312
## Feature
1413

@@ -19,6 +18,16 @@
1918
- Modularized with area rendering.
2019

2120

21+
## Install
22+
```sh
23+
# use npm
24+
npm install --save canvas-nest.js
25+
26+
# or use yarn
27+
yarn add canvas-nest.js
28+
```
29+
30+
2231
## Usage
2332

2433
- Script tag
@@ -49,9 +58,7 @@ Then ok! `Please do not add the code in the <head> </head>`.
4958

5059
- Modular usage (Area render)
5160

52-
> npm i --save canvas-nest.js
53-
54-
You could import `umd` packages with `script` tag or with modules.
61+
After installation, you can import this as module.
5562

5663
There is only one API, use it as below:
5764

@@ -71,7 +78,7 @@ cn.destroy();
7178
```
7279

7380

74-
## Configurations and settings
81+
## Configuration
7582

7683
- **`color`**: color of lines, default: `'0,0,0'`; RGB values: (R,G,B).(note: use ',' to separate.)
7784
- **`opacity`**: the opacity of line (0~1), default: `0.5`.
@@ -80,13 +87,13 @@ cn.destroy();
8087

8188
Example:
8289

90+
- Script tag
91+
8392
```html
8493
<script type="text/javascript" color="0,0,255" opacity='0.7' zIndex="-2" count="99" src="dist/canvas-nest.js"></script>
8594
```
8695

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：
96+
- Modular usage (Area render)
9097

9198
```js
9299
{
@@ -97,6 +104,8 @@ With modules，use config values as below：
97104
};
98105
```
99106

107+
**Note: If the Configuration isn't customized, default values are available as well.**
108+
100109

101110
## Related projects
102111

@@ -106,7 +115,7 @@ With modules，use config values as below：
106115

107116
## Used by
108117

109-
- [A Tool](https://atools.vip/): a convenient tool box.
118+
- [A Tool](https://atool.vip): a convenient tool box.
110119

111120

112121

‎screenshot.png

93.6 KB
Loading

0 commit comments

Comments
 (0)