カラフルなポリゴンスタイルの画像を生成することができるJSライブラ「Trianglify」

JavaScriptでカラフルなポリゴンテクスチャを描くことができる「Trianglify」を紹介します。

カラフルなポリゴンテクスチャ

Trianglifyはカラフルなポリゴンスタイルの画像を生成することができるJavaScriptライブラリです。

短いコードで美しい画像を生成、背景やワンポイントとして利用することができます。

スポンサーリンク

デモ

デモページを作成しました。ページ読み込みでランダムにカラーが変わります。

JavaScriptでポリゴンテクスチャ 5

使い方

ダウンロード

ソースコードはGitHubに公開されています。右上の「Clone or download」 > 「Download ZIP」からダウンロードできます。

Trianglifyのダウンロード

ダウンロードしたZIPファイルを展開したら、「dist」フォルダに入っている、「trianglify.min.js」を使います。

HTML

HTMLを用意します。

JS

trianglify.min.jsを読み込みます。

スクリプトを</body>閉じタグの直前などに記述します。

以上で、実装は完了です。

オプション

様々なオプションが用意されています。

一部だけ紹介します。

  • width: 横幅を指定
  • height: 高さを指定
  • x_colors: カラーを指定します。デフォルトはランダムです。「['#000000', '#4CAFE8', '#FFFFFF']」のように指定します。

この他にも複数のオプションが用意されています。

まとめ

カラフルなポリゴン画像を生成することができるJavaScriptライブラリ、「Trianglify」を紹介しました。美しいポリゴン画像を、背景画像やデザインのワンポイントとして使用することができます。

スポンサーリンク
Trianglify – カラフルなポリゴンスタイルの画像を生成することができるJSライブラ

人気の記事

コメントを投稿する

  • Posted on 2016.06.17
  • Views 775