English | 简体中文
canvas-nest的React版
创意来源于 canvas-nest.js 项目
# 推荐使用 yarn
yarn add react-canvas-nest
# 或者使用 npm
npm install react-canvas-nest注意：
- 使用方法可参考 example
- 组件大小取决于父元素大小
引入组件
import ReactCanvasNest from 'react-canvas-nest';使用组件
- 默认
<ReactCanvasNest />- 自定义
<ReactCanvasNest className = 'canvasNest' config = {{ pointColor: ' 255, 255, 255 ' }} style = {{ zIndex: 99 }} />支持className属性
| 参数 | 说明 | 默认值 |
|---|---|---|
| count | 点的数量 | 88 |
| pointR | 点的半径 | 1 |
| pointColor | 点的颜色 | 114, 114, 114 |
| pointOpacity | 点的透明度 | 1 |
| dist | 两点相连的最大距离 | 6000 |
| lineColor | 两点间连线的颜色 | 0, 0, 0 |
| lineWidth | 两点间连线的宽度 | 1 |
| follow | 鼠标跟随 | true |
| mouseDist | 鼠标与点之间的距离 | 20000 |
支持自定义style属性，默认使用的样式如下：
| 参数 | 默认值 |
|---|---|
| zIndex | -1 |
| opacity | 1 |
| display | block |
| position | absolute |
- canvas-nest.js: canvas-nest原生js版
- vue-canvas-nest: canvas-nest vue版
- canvas-nest-for-wp: wordpress插件，在插件市场搜索
canvas-nest即可安装
React-Canvas-Nest is MIT licensed.