質問: HTML5などを使って、六角形の画像を敷き詰めて、蜂の巣(ハニカム)の画像を作りたいです。 画像は、透過背景の六角形の画像をひとつだけ用意します。 入力フォームに入力された数の分だけ六角形を隙間なく敷き詰めたいです。 六角形を敷き詰めるには、縦や横方向にずらしつつ、重ねて配置しなければなりません。 HTML5などを使って、実現できないでしょうか。
回答: イメージとしてはこんな感じでしょうか? 数字を増やしていくとハニカムしていきます。10個で折り返します。ただ、どこかで限界が出るようです。Chromeだと52個で限界が来ます。理由はよくわかりません。 ソースを見たい場合はChange ViewでEditor Viewを選んでください。Pug + Sass + CoffeeScriptで書いていますが、「∨」を押してView Compiled ...を選べばコンパイル後のHTMLやCSSやJavaScriptを確認できます。 適当にとりあえず作ったので隙間はあります。CSSでボーダーを無理矢理引いていますが、背景画像にするかSVGで作った方が良いでしょう。微妙な隙間は計算で微調整するしか無いです。辺を1とすると高さは√3ですが、そこにボーダーのサイズなどを考慮する必要が出てきます。