三角形をランダムで描画する~Javascript~
WEB
Javascriptを使用して、背景に三角形を描画するscriptです。
今回の目的は背景に三角形を描画すること。
ただし、大きさ・向きはランダムであることが前提です。
サンプルHTML
|
1 2 3 |
<div id="elem"> <div>内容</div> </div> |
サンプルCSS
|
1 2 3 4 |
#elem{ position: relative; z-index: 2; } |
サンプルJS
三角形を作る関数
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
function createTri(n, max, min) { var tri = document.createElement("div") //作られる三角形の要素 var elem = document.getElementById('elem') // 三角形の作られるエリア tri.className = "tri"; elem.style.position = "relative" elem.style.overflow = "hidden" tri.style.position = "absolute"; tri.style.zIndex = "1"; for (var i = 0; i < n; i++) { var triClone = tri.cloneNode(); //最大値、最小値を考慮した三角形のサイズにする var size = Math.random() * (max - min) + min; //位置をランダムに triClone.style.top = "calc(" + -1 * size * Math.random() + "px + " + Math.random() * 100 + "%)"; triClone.style.left = "calc(" + -1 * size * Math.random() + "px + " + Math.random() * 100 + "%)"; tri.style.borderTop = " " + max * Math.random() + "px solid #fff"; tri.style.borderLeft = " " + max * Math.random() + "px solid transparent"; triClone.style.transform = "rotate(" + size * Math.random() + "deg)"; elem.appendChild(triClone); }; } |
上記関数を実行
|
1 2 |
//三角形の個数を50個、三角形の最大値40px、最小値20px createTri(50, 40, 20);てください |
実行後の画像
今回はエラーも無く、問題なく作成できました。
webpackを使用してコンパイルしてるので、書き方はESが混じってます。
