Javascript 更改画布多边形一侧的线宽？

我一直在使用基于JSFiddle（）中代码的代码来创建六边形网格。我试图找出如何用粗线条勾勒出六边形群，以表示某种“区域”。prototype.drawHex（）是并排绘制每个六边形的代码。。。特别是：

this.context.beginPath();
this.context.moveTo(x0 + this.width - this.side, y0);
this.context.lineTo(x0 + this.side, y0);
this.context.lineTo(x0 + this.width, y0 + (this.height / 2));
this.context.lineTo(x0 + this.side, y0 + this.height);
this.context.lineTo(x0 + this.width - this.side, y0 + this.height);
this.context.lineTo(x0, y0 + (this.height / 2));
this.context.closePath();
this.context.stroke();

现在，我知道这些lineTo调用中的每一个都代表六边形的一侧。如果我保留一个代表每个六边形的JSON对象，我可以跟踪六边形的哪一侧必须是较粗的线宽，以便创建一个封闭区域

例如：

var hex = { n: null,
s: null, 
nw: null,
ne: null, 
sw: null,
se: true }

在这种情况下，东南侧的线宽可能会更宽

我知道不能在单个stroke（）调用中更改线宽。我见过一些例子，人们为了创造这种效果而破坏多边形每边的路径，但是我无法用颜色填充这些六边形，因为破坏的路径

给定上面列出的巨大六边形JSON数组，每边都有属性，我能达到我想要的效果吗？我在想，作为最后的手段，我必须像往常一样绘制网格，然后在顶部绘制更厚的轮廓，但即使如此，我也不完全确定如何循环使用JSON数组来正确获取所有lineTo（）函数以创建适当的“区域”

任何想法都会有帮助

---

编辑：我是个白痴（就像其他很多问题一样，嗯？）。我可以让六边形在一个笔划（）中绘制，如上图所示，然后当坐标仍在内存中时，在顶部绘制较厚的边。我会回答你的

您在编辑中描述的方法应该可以很好地工作，但不要因为有“啊哈”的时刻而自责；-）好吧，我尽量不这么做，除非我一夜之间就想到了，而且可能是一个朋友做的。我也知道一个措词不当的问题是多么令人沮丧。。。所以我努力把它写下来。得到一个“哈哈”的时刻至少是个好结局。不过，我会说。。。我描述的方法没有我想象的那么好。因为它们都是线段，而不是一条直线，所以它们不能平滑地装配在一起，并且有点脱节（甚至看起来像不同的线宽）。我必须手动创建一条连续线来完成这项工作。关于“填充”生成的六边形：（1）开始路径并绘制较薄的六边形（2）笔划并填充较薄的完整六边形。（3） beginPath&划过两条较粗的线。您可以使用

context.lineCap=“round”

来简化细线和粗线之间的过渡，有时这会改善细线和粗线之间的配合。干杯我忍不住尝试：哇，你也为六边形编写了自己的函数！哈你说的线帽是对的，我不知道那是什么。这有助于使脱节的线条看起来更平滑。。。我对结果非常满意。