Trianglify是一款能够生成多彩的三角形网格背景的javascript库，该js插件可以生成非常好看的SVG背景图像，你可以将生成的背景图像下载保存为SVG文件。
Trianglify使用d3.js来生成多边形和SVG以及SVG过滤渲染效果。同时插件中还使用colorbrewer颜色调色板来使插件运行得更快
获取 Trianglify
你可以用你喜欢的包管理器来获取 Trianglify。
npm install trianglify
bower install trianglify
通过 CDNJS 将它引入到你的 html 中：
<script src="https://cdnjs.cloudflare.com/ajax/libs/trianglify/0.2.1/trianglify.min.js"></script>
或者 clone 该库：
git clone https://github.com/qrohlf/trianglify.git
快速开始
<script src="https://cdnjs.cloudflare.com/ajax/libs/trianglify/0.2.0/trianglify.min.js"></script>
<script>
var pattern = Trianglify({
width: window.innerWidth,
height: window.innerHeight
});
document.body.appendChild(pattern.canvas())
</script>
查看 https://qrohlf.com/trianglify 获取交互的例子，以及常用的 Trianglify 选项 。
如果你不是一个程序员，也可以通过可视化界面 来操作。
Trianglify 只暴露了一个方法到全局命令空间中，叫 Trianglify ，它接受一个单一的选项对象作为参数，然后返回一个模式对象。
var Trianglify = require('trianglify'); // 仅仅在 node.js 中需要
var pattern = Trianglify({width: 200, height: 200})
该模式对象包含有关生成图案的选项和几何数据，以及渲染的实现。
pattern.opts
包含用于生成图案的选项的对象
pattern.polys
组成图案的多边形的颜色和定点，按照下面的格式：
[
['color', [vertex, vertex, vertex]],
['color', [vertex, vertex, vertex]],
...
]
pattern.svg()
SVG 的渲染函数。返回一个 SVG 元素的 dom 节点。
pattern.canvas([HTMLCanvasElement])
canvas 的渲染函数。不传递参数则返回一个 HTMLCanvasElement 的 DOM 节点。如果传入了一个已经存在的 canvas 元素作为参数，则将图案渲染到该 canvas 里面。
要在 node.js 中使用，需要安装可选的依赖 node-canvas
pattern.png()
PNG 的渲染函数。返回一个 base64 编码的 PNG 数据的 URI 。查看演示如何将其解码成一个文件 examples/save-as-png.js
选项
Trianglify 通过一个传入的选项对象作为唯一的参数来配置，支持下面的选项：
width
Integer, 默认值 600。指定生成图案的宽度，单位为 px。
height
Integer, 默认值 400。指定生成图案的高度，单位为 px。
cell_size
Integer, 默认值 75。指定用于生成三角形的网格的尺寸大小。值越大，则越粗糙，越小，则越细腻。需要注意的是，很小的值将会明显增加 Trianglify 的运行时间。
variance
介于 0 到 1（包括1） 的小数，默认为 0.75。指定生成三角形的随机数量。
seed
Number 或者 string，默认值 null。创建重复图片的随机数生成器的种子。
x_colors
css 格式颜色的字符串或者数组, 默认值是 'random'。指定 X 轴上使用的颜色渐变。
有效的字符值为 'random' 或者 colorbrewer palette 上的一个颜色名（比如 'YlGnBu' 或 'RdBu'）。当设置成 'random' 时，将会从 colorbrewer 库随机选择一个渐变。
有效的数组值应该以任意的 CSS 格式指定 color stops(比如 ['#000000', '#4CAFE8', '#FFFFFF'])。
y_colors
CSS 格式颜色的字符串或者数组，默认值是 'match_x'。当设置成 match_x 时，那么X 轴和 Y 轴将应用相同的渐变。 y_colors 接受和 x_colors 相同的参数值。
color_space
String，默认值 'lab'。设置用于生成渐变的颜色空间。支持的值有 rgb, hsv,hsl, hsi,lab 和 hcl。
color_function
指定一个自定义的函数来为三角形着色，默认为 null。接受你一个利用三角形中心为参数的 x，y 坐标来重写标准渐变色的函数。该函数返回一个 CSS格式的颜色字符串。
这里有一个使用 HSL 颜色格式生成彩虹图案的例子：
var colorFunc = function(x, y) {
return 'hsl('+Math.floor(Math.abs(x*y)*360)+',80%,60%)';
};
var pattern = Trianglify({color_function: colorFunc})
stroke_width
Number，默认值 1.51。指定图案中三角形的边线宽度。默认值是一个在将图案渲染成 canvas 时消除锯齿的理想值。
链接: https://www.fly63.com/nav/1528
