trianglify 介绍
Trianglify是一款能够 生成 多彩的三角形网格背景的JavaScript库，该js 插件 可以 生成 非常好看的SVG背景图像，你可以将 生成 的背景图像下载保存为SVG 文件 。??
Trianglify使用d3.js来 生成 多边形和SVG以及SVG过滤渲染 效果 。同时 插件 中还使用colorbrewer颜色调色板来使 插件 运行得更快
获取 Trianglify
你可以用你喜欢的包管理器来 获取 Trianglify。
npm install trianglify
bower install trianglify
通过 CD njs 将它引入到你的 html 中：
<script src="https://cd njs .cloudflare.com/ajax/libs/trianglify/0.2.1/trianglify.min.js"></script>
或者 clone 该库：
git clone https://github.com/qrohlf/trianglify.git
快速 开始
<script src="https://cd njs .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 选项 。
如果你不是 一个 程序员，也可以通过可视化界面?来操作。
API
Trianglify 只暴露了 一个 方法 到全局命令空间中，叫?Trianglify?，它接受 一个 单一的选项对象作为参数，然后返回 一个 模式对象。
var Trianglify = require('trianglify'); // 仅仅在 node.js 中需要
var pattern = Trianglify({width: 200,height: 200})
该模式对象包含有关 生成 图案的选项和几何数据，以及渲染的实现。
pattern.opts
包含用于 生成 图案的选项的对象
pattern. poly s
组成图案的多边形的颜色和定点，按照下面的格式：
[
['color',[vertex,vertex,vertex]],
['color',
...
]
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 时消除锯齿的理想值。 链接 : http://www.fly63.com/nav/1528网站地址 : http://qrohlf.com/trianglify/
GitHub: https://github.com/qrohlf/trianglify
网站描述: 一个 生成 好看的 SVG 背景 图片 的库
trianglify官方网站
官方网站： http://qrohlf.com/trianglify/
如果觉得 网站内容还不错，欢迎将 网站 推荐给程序员好友。