我在使用
Trianglify插件时遇到了一些问题.我想用它来设置div的背景.我怎样才能做到这一点？我找不到合适的例子.
这是我的示例代码：
<script>
var pattern = Trianglify({
width: window.innerWidth,height: window.innerHeight
});
document.body.appendChild(pattern.canvas())
</script>
另外,我可以使用来自Trianglify的不同背景的div吗？
解决方法
一个DIV
以下是将DIV背景设置为Trianglify模式的示例.它有点作弊并将DIV子节点设置为模式,但它应该适合你.
var something = document.getElementById('something');
var dimensions = something.getClientRects()[0];
var pattern = Trianglify({
width: dimensions.width,height: dimensions.height
});
something.appendChild(pattern.canvas());
DIV具有某种ID,并且在div的高度和宽度上设置CSS样式.
工作示例JSfiddle：http://jsfiddle.net/u55cn0fh/
多个DIV
我们可以轻松地为多个DIV扩展它,如下所示：
function addTriangleto(target) {
var dimensions = target.getClientRects()[0];
var pattern = Trianglify({
width: dimensions.width,height: dimensions.height
});
target.appendChild(pattern.canvas());
}
JSfiddle：http://jsfiddle.net/u55cn0fh/1/
多个DIV作为真正的背景图像
以上只是将模式作为子节点附加到DIV,而不是将其设置为背景.好消息是我们确实可以像这样使用background-image CSS属性：
function addTriangleto(target) {
var dimensions = target.getClientRects()[0];
var pattern = Trianglify({
width: dimensions.width,height: dimensions.height
});
target.style['background-image'] = 'url(' + pattern.png() + ')';
}
JSfiddle：http://jsfiddle.net/abL2kc2q/