1、问题描述:
希望实现六边形的布局,如图
2、代码
<canvas id="test">
</canvas>
<script>
// 获取canvas元素
const canvas = document.getElementById("test");
const ctx = canvas.getContext("2d");
// 设置canvas的宽度和高度
canvas.width = 600;
canvas.height = 600;
// 计算六边形的参数
const centerX = canvas.width / 2;
const centerY = canvas.height / 2;
const sideLength = 100;
// 绘制六边形
function drawHexagon(x, y) {
ctx.beginPath();
for (let i = 0; i < 6; i++) {
const angle = 2 * Math.PI / 6 * i;
const posX = x + sideLength * Math.cos(angle);
const posY = y + sideLength * Math.sin(angle);
ctx.lineTo(posX, posY);
}
ctx.closePath();
ctx.fillStyle = "#ffffff";
ctx.fill();
ctx.strokeStyle = "#000000";
ctx.stroke();
}
// 绘制正六边形方块
function drawHexagonGrid() {
drawHexagon(centerX, centerY);
// 计算周围六个方块的坐标
const radius = sideLength * Math.sqrt(3);
const xOffset = radius * Math.cos(Math.PI / 6);
const yOffset = radius * Math.sin(Math.PI / 6);
// 上方方块
drawHexagon(centerX, centerY - 2 * yOffset);
// 上右方方块
drawHexagon(centerX + xOffset, centerY - yOffset);
// 下右方方块
drawHexagon(centerX + xOffset, centerY + yOffset);
// 下方方块
drawHexagon(centerX, centerY + 2 * yOffset);
// 下左方方块
drawHexagon(centerX - xOffset, centerY + yOffset);
// 上左方方块
drawHexagon(centerX - xOffset, centerY - yOffset);
}
// 调用函数进行绘制
drawHexagonGrid();
</script>