カラフルなメッシュ画像を表示させる「Trianglify」

こんにちは、ウェブラボ技術メモです。

今回はカラフルなメッシュ画像を表示させる「Trianglify」を使用してみようと思います。

設定を比較するDEMOを作成しました。

DEMOはこちら

様々なパターンがありますが、短いコードで簡単に設定できてしまいます。

それでは実際に実装していきましょう。

以下からプラグインをダウンロードしてください。

github

まずはhead内でjquery本体とプラグインを読み込ませます。

■HTMLhead内

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/trianglify.min.js"></script>

次にプラグインのオプション設定を行います。

この他のオプションについては、githubにて公開されています。

■HTMLhead内　スクリプト部分

<script>
	var sample = Trianglify({
		width: 980, //横幅（px指定 デフォルトは600px）
		height: 400, //縦幅（px指定 デフォルトは400px）
		cell_size: 75 //メッシュサイズ（高いほど粗くなり、低いほど細かくなる デフォルトは75）
		variance: 0.75 //分散（0～1の小数点以下の値 デフォルトは0.75）
		x_colors: 'random', //x軸方向のグラデーション（カラーコードの配列で指定 デフォルトはランダム生成を行う「random」）
		y_colors: ['#000', '#07539F', '#FFF'] //y軸方向のグラデーション（カラーコードの配列で指定 デフォルトはx_colorsの設定を引き継ぐ「match_x」）
	});
	document.getElementById("result").appendChild(sample.canvas())//要素のidを指定
</script>

最後にスクリプト内で指定した要素とidをHTMLのbody内に記述するだけです。

この記述した箇所に、設定したサイズのメッシュ画像がcanvasタグで表示されます。

■HTML body内

<div id="result"></div>

対応ブラウザについて確認してみました。

◯ Google Chrome
◯ Firefox
◯ Safari
◯ Opera
◯ Internet Explorer 9、10+
× Internet Explorer 7、8
古いIEを除いて全てのブラウザで動作しました。

以上、技術メモでした。