Javascript 使用三角形设置div背景

我在使用插件时遇到了一些问题。我想用它来设置

div

的背景。我该怎么做？我找不到合适的例子

以下是我的示例代码：

<script>
    var pattern = Trianglify({
    width: window.innerWidth, 
    height: window.innerHeight
});
document.body.appendChild(pattern.canvas())
</script>

变量模式=三角形({
宽度：window.innerWidth，
高度：window.innerHeight
});
document.body.appendChild（pattern.canvas（））

---

另外，我可以有来自Triangalify的不同背景的

div

s吗？

一个div

下面是将DIV背景设置为三角形图案的示例。它有点作弊，并将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为

something

，CSS样式在DIV上设置为高度和宽度

JSFIDLE工作示例：

多个div

我们可以轻松地将其扩展到多个div，如下所示：

function addTriangleTo(target) {
    var dimensions = target.getClientRects()[0];
    var pattern = Trianglify({
        width: dimensions.width, 
        height: dimensions.height
    });
    target.appendChild(pattern.canvas());
}

JSFiddle：

多个div作为真实背景图像

以上只是将模式作为子节点附加到DIV，而不是将其设置为背景。好消息是我们确实可以像这样使用

背景图像
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() + ')';
}

jsFIDLE:
在我的例子中，我必须使用一个类来使用同一背景图像的多个实例：


var obj={
“TriangalifiedLightBlue”：[“#a5cade”，“#b7d5e5”，“#d5e6f0”，“#006ab4”，“#e8f2f7”，“#cee2ed”]，
“TriangalifiedBleu”：[“#004e83”、“#005f9f”、“#004879”、“#006ab4”、“#004777”、“#005f9f”]，
“TriangalifiedViolet”：[#680036'、#830447'、#e62f8e'、#c76c9b']，
“三角法”：[#5f0308'、#851117'、#cf363f'、#e86d74']
};
函数addTriangle（类名）{
targets=document.getElementsByClassName（classname）；
对于（i=0；i
div{
高度：100px；
宽度：500px；
利润率：10px；
浮动：左；
背景：#efef；
}
我回答这个问题已经很晚了，但我认为它仍然很有价值：

如果您对使用
pattern.png（）
生成png版本不满意（就像我不满意一样），那么您还可以使用
pattern.svg（）
设置svg背景，只需做一些额外的工作

我总是倾向于使用SVG背景，因为它们通常更清晰。在我运行的一个测试用例中，使用SVG版本也节省了一些位（尽管这是相对的，因为发送三角形背景一开始就有点负担）

base64 SVG编码中的字符：137284

base64 PNG编码中的字符：195288

将SVG转换为base64编码，然后将其设置为背景图像，可以实现如下操作：

// Create the Trianglify pattern
var pattern = Trianglify({
    cell_size: 30,
    variance: 0.75,
    x_colors: 'random',
    y_colors: 'match_x',
    palette: Trianglify.colorbrewer,
    stroke_width: 1.51,
});

// Serialize the SVG object to a String
var m = new XMLSerializer().serializeToString(pattern.svg());

// Perform the base64 encoding of the String
var k = window.btoa(m);

// Query the element to set the background image property
var element = document.getElementsByTagName('header')[0];

// Set the background image property, including the encoding type header
element.style.backgroundImage = 'url("data:image/svg+xml;base64,' + k + '")';

希望这有帮助
 您提供的这个解决方案在我的DIV中已有的所有其他元素之后添加了三角形。我想将三角形设置为DIV背景。@Marek说得好--我想知道这是否是一个问题。我用一种方法更新了我的答案，使之成为真实的背景图片！工作顺利！还有一件事。如果我想用它作为区域背景，那么在两个区域之间我可以看到一点白色的水平空间（1-2像素）。有什么想法吗？附言。也许你也能帮我解决这个问题@Marek我不知道为什么它会在节之间显示空白——我在这里看不到有两个节的空白测试。我将检查另一个问题！