Trianglify是一款能够生成多彩的三角形网格背景的javascript库，该js插件可以生成非常好看的SVG背景图像，你可以将生成的背景图像下载保存为SVG文件。
Trianglify使用d3.js来生成多边形和SVG以及SVG过滤渲染效果。同时插件中还使用colorbrewer颜色调色板来使插件运行得更快。
先直接看一个最基本的示例吧
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Examples</title>
</head>
<body>
<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>
</body>
</html>再来看API和参数：
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 时消除锯齿的理想值。
const defaultOptions = {
width: 600,
height: 400,
cellSize: 75,
variance: 0.75,
seed: null,
xColors: 'random',
yColors: 'match',
fill: true,
palette: trianglify.colorbrewer,
colorSpace: 'lab',
colorFunction: trianglify.colorFunctions.interpolateLinear(0.5),
strokeWidth: 0,
points: null}
width
整数，默认为600. 指定要生成的图案的宽度（以像素为单位）。
height
整数，默认为400. 指定要生成的图案的高度（以像素为单位）。
cellSize
整数，默认为75. 指定用于生成三角形的网格的像素大小。值越大，图案越粗，值越小，图案越精细。请注意，非常小的值可能会显着增加 Trianglify 的运行时间。
variance
0 到 1（含）之间的十进制值，默认为0.75. 指定生成三角形时使用的随机量。您可以将其设置为高于 1，但这样做可能会导致在边缘包含“间隙”的模式。
seed
字符串，默认为null. 播种随机数生成器以创建可重复的模式。当设置为 null 时，RNG 将使用来自环境的随机值作为种子。一个示例用法是将博客文章标题作为种子传递，以便为博客网站上的每篇文章生成独特但一致的三角化模式。
xColors
False、字符串或 CSS 格式颜色的数组，默认为'random'. 指定在 x 轴上使用的颜色渐变。
有效的字符串值是'random'，或colorbrewer 调色板的名称（即'YlGnBu' 或'RdBu'）。当设置为“随机”时，将从 colorbrewer 库中随机选择一个渐变。
有效的数组值应以任何 CSS 格式（即['#000000', '#4CAFE8', '#FFFFFF']）指定色标。
yColors
False，字符串或 CSS 格式颜色的数组，默认为'match'. 当设置为“匹配”时，将在两个轴上使用 x 轴颜色渐变。否则，接受与 xColors 相同的选项。
palette
random用于 xColors 或 yColors时要选择的颜色组合数组。请参阅src/utils/colorbrewer.js此数据的格式。
colorSpace
字符串，默认为'lab'. 设置用于生成渐变的色彩空间。支持的值为 rgb、hsv、hsl、hsi、lab 和 hcl。有关为什么这很重要的一些背景信息，请参阅此博客文章。
colorFunction
指定为三角形着色的自定义函数，默认为null. 接受一个覆盖标准渐变着色的函数，该函数传递了关于图案和每个多边形的各种数据，并且必须返回一个 Chroma.js 颜色对象。
有关内置颜色函数以及如何编写自定义颜色函数的更多信息，请参阅examples/color-function-example.html和。src/utils/colorFunctions.js
fill
布尔值，默认为true. 指定是否应填充 Trianglify 生成的多边形。
strokeWidth
数字，默认为 0。指定用于勾勒多边形轮廓的笔划宽度。这可以与 结合使用fill: false以生成类似网络的模式。
points
要进行三角剖分的点数组 ([x, y])，默认为 null。如果未指定，则会生成一个数组随机点来填充空间。点必须在 和 定义的坐标空间width内height。
