当前位置：首页 > JavaScript

js实现蜂窝布局

2026-04-07 11:30:37JavaScript

实现蜂窝布局的方法

蜂窝布局（Hexagonal Grid）在网页设计中常用于创建独特的视觉效果或游戏地图。以下是使用JavaScript和CSS实现蜂窝布局的几种方法。

使用CSS Grid和JavaScript计算位置

通过CSS Grid结合JavaScript动态计算每个六边形的坐标，实现蜂窝排列。

function createHexGrid(rows, cols, containerId) {
    const container = document.getElementById(containerId);
    const hexWidth = 100; // 六边形宽度
    const hexHeight = Math.sqrt(3) * hexWidth / 2; // 六边形高度

    for (let row = 0; row < rows; row++) {
        for (let col = 0; col < cols; col++) {
            const hex = document.createElement('div');
            hex.className = 'hex';

            // 计算位置：奇数行偏移
            const x = col * hexWidth * 0.75;
            const y = row * hexHeight + (col % 2) * hexHeight / 2;

            hex.style.left = `${x}px`;
            hex.style.top = `${y}px`;
            container.appendChild(hex);
        }
    }
}

CSS部分：

.hex {
    position: absolute;
    width: 100px;
    height: 115.47px; /* 100 * sqrt(3) */
    background-color: #64C7CC;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

使用Canvas绘制蜂窝网格

通过Canvas API动态绘制六边形网格，适合需要交互的场景。

function drawHexGrid(canvasId, rows, cols, size) {
    const canvas = document.getElementById(canvasId);
    const ctx = canvas.getContext('2d');
    const width = size * 2;
    const height = Math.sqrt(3) * size;

    for (let row = 0; row < rows; row++) {
        for (let col = 0; col < cols; col++) {
            const x = col * width * 0.75;
            const y = row * height + (col % 2) * height / 2;

            ctx.beginPath();
            for (let i = 0; i < 6; i++) {
                const angle = Math.PI / 3 * i;
                const px = x + size * Math.cos(angle);
                const py = y + size * Math.sin(angle);
                ctx.lineTo(px, py);
            }
            ctx.closePath();
            ctx.fillStyle = '#64C7CC';
            ctx.fill();
        }
    }
}

使用CSS Flexbox和伪元素

纯CSS方案，通过Flexbox和伪元素模拟六边形排列。

.hex-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

.hex {
    width: 100px;
    height: 115.47px;
    background-color: #64C7CC;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    margin-right: -25px; /* 重叠部分 */
}

/* 奇数行偏移 */
.hex:nth-child(odd) {
    transform: translateY(57.735px); /* height/2 */
}

使用第三方库（如Honeycomb）

Honeycomb是一个专门用于创建六边形网格的JavaScript库，简化了开发流程。

js实现蜂窝布局

import Honeycomb from 'honeycomb-grid';

const Grid = Honeycomb.defineGrid();
const grid = Grid.rectangle({ width: 5, height: 5 });

grid.forEach(hex => {
    const { x, y } = hex.toPoint();
    console.log(`Hex at (${x}, ${y})`);
});