mailzwj / dot-line

JS+Canvas页面装饰插件

JS页面装饰插件

预览

在线预览

使用方法

• ES6 Module

import DotLine from 'dot-line';

const dec = new DotLine(option);

• AMD Module

const DotLine = require('dot-line').default;

const dec = new DotLine(option);

• Online url

<script src="${script_path}/DotLine.min.js"></script>
<script>
(() => {
    const Component = DotLine.default;
    const dec = new Component(option);
})();
</script>

Options

• points<Int>: 整数，生成点的个数，默认200
• maxPointSize<Number>: 数字，产生圆点的最大半径，结果为[1, maxPointSize]，默认[1, 2]
• pointColor<String>: 生成圆点的颜色值，任意合法颜色值的字符串，默认rgba(255, 255, 255, 0.3)
• lineColor<String>: 点与点之间连线的颜色值，任意合法颜色值的字符串，默认rgba(255, 255, 255, 0.3)
• lineWidth<Number>: 连线宽度，默认0.5
• maxSpace<Number>: 最大连线距离，当距离大于该值的点不会连线，默认值100
• speed<String>: 控制点的移动速度，可选值：fast、slow，默认正常速度
• parentId<String>: 被装饰的容器ID，默认装饰body区域
• zIndex<Int>: 控制装饰图案层级，避免某些情况下的遮挡，默认100000

其他

组件动画基于Canvas实现，动画点数量过大容易导致页面占用大量资源，组件内部已做了一定的优化，但使用时仍需谨慎，根据个人情况合理设置动画点数量。