【DeveMobile实例】d3.js 与Trianglify 制作SVG格式Low-Poly 特效

2015/02/21 前端代码, 前端开发原创 3 8,636

在升级了DeveMobile 主题的时候Jeff 也顺便将主题主页进行了更新，访问主页你会看到首屏的Low-Poly 背景（每次刷新都不同），这个效果就是利用了d3.js 与Trianglify 制作的。

所需元素介绍

d3.js

自维基百科：D3.js（D3或Data-Driven Documents）是一个用动态图形显示数据的JavaScript库，一个数据可视化的工具。兼容W3C标准，并且利用广泛实现的SVG，JavaScript，和CSS标准。

Trianglify

Trianglify 是一个能够生成五颜六色的三角形图案的 JavaScript 库，可以用来作为 SVG 图像和 CSS 背景。它的灵感来自于 Btmills 的 Geopattern，并使用 d3.js 建立多边形的 SVG 图形和使用 SVG 过滤器进行渲染。它还包括 colorbrewer 调色板库，让您快速启动和运行。

Github主页演示站点

使用方法

导入相关文件：

<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="trianglify.js"></script>

绑定元素，如body标签：

var t = new Trianglify();
var pattern = t.generate(document.body.clientWidth, document.body.clientHeight);
document.body.setAttribute('style', 'background-image: '+pattern.dataUrl);

更多例子可以查看Github主页或者DeveMobile主题主页的源代码。