本文讲解如何将 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 pt.y) !== (yj > pt.y))
&& (pt.x <p>该函数接收顶点数组和鼠标坐标，返回布尔值，是实现交互的核心桥梁。</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill5961" title="Markdown Canvas"><img
src="https://img.php.cn/upload/skill/000/000/081/179074273835215.jpg" alt="Markdown Canvas" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill5961" title="Markdown Canvas" class="overflowclass">Markdown Canvas</a>
<p class="overflowclass">将Markdown文件转换为美观的HTML页面，适用于Canvas或浏览器查看。用于用户请求渲染、可视化、显示或分享Markdown文件时。</p>
</div>
<a rel="nofollow" href="/xiazai/skill5961" title="Markdown Canvas" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div><h3>✅ 统一绘制 + 交互响应流程</h3><p>完整交互链路如下：</p><ol>
<li>
<strong>绘制阶段</strong>：遍历 <code>hexagons</code> 数组，调用 <code>drawPolygon(hexa, hexa.color)</code> 渲染所有六边形；</li>
<li>
<strong>监听阶段</strong>：绑定 <code>canvas.addEventListener('click', ...)</code>，获取 <code>ev.offsetX/offsetY</code>（注意：务必使用 <code>offsetX/Y</code> 而非 <code>clientX/Y</code>，以规避缩放/滚动偏移）；</li>
<li>
<strong>响应阶段</strong>：遍历 <code>hexagons</code>，用 <code>isPointInPoly()</code> 找到被点击的六边形，修改其 <code>color</code> 属性，然后<strong>重绘整个画布</strong>（或仅重绘该六边形区域，但全量重绘更简单可靠）。</li>
</ol><p>示例交互逻辑：</p><pre class="brush:php;toolbar:false;">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 数组，而无需触碰渲染细节。
