本文讲解如何将 canvas 绘制的六边形网格结构化存储，并通过鼠标事件精准识别并高亮/重绘任意六边形，实现无需多个 canvas 即可独立控制每个格子颜色的交互逻辑。
本文讲解如何将 canvas 绘制的六边形网格结构化存储，并通过鼠标事件精准识别并高亮/重绘任意六边形，实现无需多个 canvas 即可独立控制每个格子颜色的交互逻辑。
在基于 Canvas 的棋盘类游戏开发中，一个常见误区是试图为每个图形（如六边形）创建独立的 <canvas></canvas> 元素或上下文——这不仅性能极差，也违背 Canvas 的设计初衷。真正高效且可扩展的方式是：分离「数据表示」与「视觉绘制」，即用纯 JavaScript 对象描述每个六边形的几何信息（顶点坐标、状态等），再统一通过单个 2D 上下文进行渲染与交互响应。
✅ 正确的数据建模方式
原代码中 tuiles[x+' '+y] = canvas.getContext("2d") 是错误的：getContext() 返回的是上下文对象，不能用于标识图形，更无法支持后续状态管理。应改为存储六边形的顶点数组（polygon），例如：
const hexagon = [
{ x: 100, y: 100 },
{ x: 120, y: 90 },
{ x: 140, y: 100 },
{ x: 140, y: 120 },
{ x: 120, y: 130 },
{ x: 100, y: 120 },
{ x: 100, y: 100 } // 闭合首尾
];
hexagons.push(hexagon); // 存入全局数组，而非对象键值对这样，每个六边形就是一个轻量、可序列化、可遍历的几何实体，便于后续状态绑定（如 hexagon.color = '#ff6b6b' 或 hexagon.isOccupied = true）。
✅ 精准命中检测：点是否在多边形内？
Canvas 本身不提供“点击某图形”的 API，需手动实现射线法（Ray Casting）判断点是否位于任意多边形内部。以下 isPointInPoly() 是经过验证的健壮实现（兼容凹/凸多边形，含边界处理）：
function isPointInPoly(poly, pt) {
let inside = false;
for (let i = 0, j = poly.length - 1; i < poly.length; j = i++) {
const xi = poly[i].x, yi = poly[i].y;
const xj = poly[j].x, yj = poly[j].y;
const intersect = ((yi > pt.y) !== (yj > pt.y))
&& (pt.x < (xj - xi) * (pt.y - yi) / (yj - yi) + xi);
if (intersect) inside = !inside;
}
return inside;
}该函数接收顶点数组和鼠标坐标，返回布尔值，是实现交互的核心桥梁。
✅ 统一绘制 + 交互响应流程
完整交互链路如下：
-
绘制阶段：遍历
hexagons数组，调用drawPolygon(hexa, hexa.color)渲染所有六边形； -
监听阶段：绑定
canvas.addEventListener('click', ...)，获取ev.offsetX/offsetY（注意：务必使用offsetX/Y而非clientX/Y，以规避缩放/滚动偏移）； -
响应阶段：遍历
hexagons，用isPointInPoly()找到被点击的六边形，修改其color属性，然后重绘整个画布（或仅重绘该六边形区域，但全量重绘更简单可靠）。
示例交互逻辑：
canvas.addEventListener('click', (ev) => {
const rect = canvas.getBoundingClientRect();
const x = ev.clientX - rect.left;
const y = ev.clientY - rect.top;
const target = hexagons.find(hexa => isPointInPoly(hexa, { x, y }));
if (target) {
target.color = '#' + Math.floor(Math.random() * 0xffffff).toString(16);
redraw(); // 重绘全部六边形
}
});
function redraw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
hexagons.forEach(hexa => drawPolygon(hexa, hexa.color || '#ccc'));
}⚠️ 注意事项：
- 避免在
mousemove中频繁重绘（易卡顿），建议改用click或pointerdown；- 若需 hover 效果，可用
requestAnimationFrame节流 + 缓存上次高亮索引，仅重绘差异区域；- 响应式适配时，务必同步更新
canvas.width/height并重新生成hexagons数据（因坐标系会变）；- 顶点坐标建议统一使用逻辑坐标（如格子编号），再通过缩放矩阵映射到屏幕，便于后期扩展（如缩放、拖拽）。
通过这种「数据驱动 + 函数式绘制」的设计，你的六边形棋盘将具备良好的可维护性、可测试性与扩展性——无论是添加单位、路径寻址，还是集成物理引擎，都只需操作 hexagons 数组，而无需触碰渲染细节。
