javascript – 使用Trianglify设置di​​v背景

我在使用 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/

原文地址：https://www.jb51.cc/js/158727.html