使用Trianglify Javascript库的文本

Using Text With The Trianglify Javascript Library

本文关键字：文本 Javascript Trianglify 使用      更新时间：2023-09-26

所以我一直在使用Trianglify库，我一直喜欢它。我唯一的问题是它处理文本的方式:它把所有文本都推到顶部，而我想要随机生成的背景作为背景，上面有文本。下面是我到目前为止的代码:

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

和

        <div class="container-fluid" id="welcome">
        <div class="row">
        <div class="col-md-6 col-md-offset-3">
        <h1> Welcome to the website </h1>
        </div>
        </div>
        </div>

请帮忙!非常感谢您的宝贵时间。

我刚刚遇到这个问题，因为我有同样的问题。我是这么做的。

<canvas id="container1"></canvas>
<script>
var pattern = Trianglify({cell_size: 25, x_colors: 'Blues'});
pattern.canvas(document.getElementById('container1'));
</script>
<div class="screen-container trianglify-container">
    <div class="container">
        <div class="row">
            <h3>This is where my text goes</h3>
        </div>
    </div>  
</div>
CSS

.trianglify-container {
    background-color: transparent;
    color:#fff;
    text-align: center;
    padding-top: 20vh;
}
canvas#container1 {
    position: absolute;
    width: 100vw;
    height: 100vh;
}

我使用Bootstrap，因此在HTML中的container和rowdiv。将canvas#container1设置为absolute位置可以修复它，并且HTML中的所有内容都应该超过它。设置width为100vw, height为100vh，确保它占据整个屏幕。

将trianglify-container的位置设置为relative，确保它相对于它上面的任何fixed或absolute对象(在本例中是画布)显示。使用padding可以让你移动你想要的文本。

如果我想让页面上的其他部分都有相同的三角形背景，我可以这样做:

canvas#container1 {
    position: absolute;
    width: 100vw;
    height: 100vh;
}
相关文章：