【javascript】jQueryで線を散らす【lines.js】

今回は適当に線を引けるようなものを探していたら見つけたものです。

簡単に線を散らすことができます。

それでは早速見ていきましょう。

こちらがデモページです。イメージがわかない人は先にこちから確認してください。

lines.jsの使い方

公式ページはこちらになっています。ダウンロードしてきてください。

jquery読み込みの後に読み込んでください。

表示したい場所に任意のidを与えたcanvasを用意します。

<canvas id="linesCanvas"></canvas>

html自体はこれだけで終了です。後はスクリプト側から設定します。

スクリプトコードはこのようになります。

$(function() {
			let canvasWidth = $(window).width();
			let canvasHeight = $("body").height();

			$("#linesCanvas").attr("height" , canvasHeight).attr("width" , canvasWidth);
			new lines({
				canvas : "linesCanvas" ,
				pieces : 20 ,
				color : "#f0f0f0"
			}).draw(); 
		});

今回は背面全面にラインを引きたいと思いますので、ウィンドウの幅とボディの高さで取得しています。

取得した値を先ほどid指定したcanvasに与えます。

次にオブジェクト生成し、drawで描いています。

canvasには先ほどのhtml部のcanvasのid、piecesには引きたい線の数、colorには引きたい線の色を指定します。

これだけで上のデモページのように線を散らすことが可能です。簡単ですね。

毎回変わるのが嫌な方はコンソールログにパスの始点と終点が表示されていますので、それをもとに固定させてしまうのもいいかもしれませんね。