Trianglify Javascriptライブラリでのテキストの使用

Question

私は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> 

助けてください！あなたのお時間をありがとうございました。

Answer 1

私は同じ問題があるので、私はこの質問に出会ったばかりです。ここに私がしたことがあります。私はHTMLでブートストラップ、したがってcontainerとrow divを使用しています

HTML

<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; 
} 

説明 。 canvas#container1をabsoluteに設定すると、それが修正され、HTMLに続くすべてがその上に来るはずです。 widthを100vw、heightを100vhに設定すると、画面全体が確実に表示されます。 relativeにtrianglify-container位置を設定

は、この場合、キャンバスでは、上記の任意fixed又はabsoluteオブジェクトに対して現れる保証します。パディングを使用して、テキストが必要な場所に移動しましょう。

私はいつも同じtrianglify背景を持つようにページ上の他のすべてを望んでいた場合、私は何ができる：

canvas#container1 { 
    position: absolute; 
    width: 100vw; 
    height: 100vh; 
}