js彩色渐变动画多边形（几何）图案背景特效

演示  website 下载

插件介绍

这是是一个纯JavaScript库，根据SVG、Canvas或PNG从三角形生成彩色多边形（几何）图案背景特效插件。 

使用方法

1.在html页面中加载插件文件。

<script src="trianglify.min.js"></script>

2.插件初始化。

• width：图案宽度
• height：图案高度
• cell_size：用于生成随机网格的单元格大小
• variance：网格随机化多少
• seed：起始随机数 
• x_colors：x停止色
• y_colors：y停止色
• palette：用于“随机”颜色选项
• color_space：用于渐变构造和插值的颜色空间
• color_function：Color函数f（x，y），返回可由chroma js使用的颜色规范
• stroke_width：笔划宽度。默认值为1.51以修复画布抗锯齿问题。
• points：要三角剖分的[x，y]坐标数组。默认为“未定义”，并生成点。

var pattern = Trianglify({
    width: 600,
    height: 400,
    cell_size: 75,
    variance: 0.75,
    seed: null, 
    x_colors: 'random',
    y_colors: 'match_x',
    palette: colorbrewer, 
    color_space: 'lab',
    color_function: null,
    stroke_width: 1.51,
    points: undefined 
})

3.将多边形图案附加到元素。

// as Canvas
document.body.appendChild(pattern.canvas())

// as SVG
document.body.appendChild(pattern.svg())

// as PNG
document.body.appendChild(pattern.png())