Question

我一直在使用基于此JSFiddle（http://jsfiddle.net/qQA88/）中的代码的代码来创建六边形网格。我试图弄清楚如何用更粗的线勾勒出六边形组，以表示各种各样的“领域”。 HexagonGrid.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对象，我可以跟踪六边形的哪一边必须是一个较粗的lineWidth，以便创建一个封闭的区域。

示例：

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

在这种情况下，东南侧可能是较粗的线宽。

我知道你无法改变单个stroke（）调用中的lineWidth。我已经看到人们为多边形的每一面打破路径以创建此效果的示例，但是由于路径损坏，我无法用颜色填充这些六边形。

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

任何想法都会有所帮助。

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

更改画布多边形的一侧的lineWidth？

0 个答案: