Javascript 用六边形填充圆（不同方法）

由于我以前的方法似乎不起作用，而且解决方案相当复杂，我决定尝试另一种可能更简单一点的方法

这一次，在代码绘制任何六边形之前，它必须确定预定义圆中可以容纳多少行和列，然后根据此结果开始绘制所有六边形

到目前为止，这是一种工作，但在我以前的方法中，有时六角重叠，或者在圆的下部留下一个很大的间隙

另一个问题是，如何将这些六边形格式化为网格

请注意，画布下有一个小滑块，用于增加/减少圆的半径并重新绘制六边形

var c_el=document.getElementById（“myCanvas”）；
var ctx=c_el.getContext（“2d”）；
var canvas_width=c_el.clientWidth；
var canvas_height=c_el.clientHeight；
变量圆={
r:120，///半径
pos:{
x：（画布宽度/2），
y：（画布高度/2）
}
}
var hexagon={
r:20，
pos:{
x:0,，
y:0
}
}
var hex_w=hexagon.r*2；
var hex_h=数学地板（数学sqrt（3）*hexagon.r）；
var hex_s=（3/2）*hexagon.r；
用十六进制（圆圈）填充圆圈；
函数fill_CircleWithHex（圆）{
画圈（圈）；
var c_h=circle.r*2；///圆的高度////
var c_w=c_h；///圆宽度/////
var max_hex_H=数学舍入（c_H/hex_H）；
变量行大小=[]
对于（变量行=0；行对于（var c=0；c您在代码上花费了一些时间来打包十六进制。这并不完美，我确信有更好的方法可以做到这一点。请查看它是否有帮助，或者您是否可以修复十六进制从圆中走出来的问题[现在，行大小的计算存在问题].也许我可以在有时间的时候再看一遍，或者我们可以看看其他方法


var c_el=document.getElementById（“myCanvas”）；
var ctx=c_el.getContext（“2d”）；
var canvas_width=c_el.clientWidth；
var canvas_height=c_el.clientHeight；
变量圆={
r:120，///半径
pos:{
x：（画布宽度/2），
y：（画布高度/2）
}
}
var hexagon={
r:20，
pos:{
x:0,，
y:0
}
}
var hex_w=hexagon.r*3；///增加了间距
var hex_h=数学地板（数学sqrt（3）*hexagon.r/2）；///增加了间距
var hex_s=（3/2）*hexagon.r；
var hex_width=33.4；//基于r=20
用十六进制（圆圈）填充圆圈；
函数fill_CircleWithHex（圆）{
画圈（圈）；
var c_h=circle.r*2；///圆的高度////
var c_w=c_h；///圆宽度/////
var max_hex_H=数学四舍五入（c_H/（hex_H））；
变量行大小=[]
对于（var col=0；col对于（var c=0；c，以下解决了以圆中点为中心的规则蜂窝结构的填充问题。规则意味着：


所有六边形的集合在围绕圆心旋转60度的情况下是对称的

各个六边形的坐标表示六边形壳体从中心开始倒转的序号和从正午开始的顺时针序号

随着圆变宽，新的六边形壳不一定会作为一个整体填充。虽然填充外壳的自由度部分产生了改进的解决方案，但它仍然不是最佳解决方案。将规则性放宽到旋转对称wrt 60度以外的其他角度（即120度和180度）将允许更高的圆圈内部覆盖率

在下一次修订的代码中，我将研究其背后的数学原理（可能会找到一个定理来证明圆的交点周围的旋转对称性是最优性的必要条件）


var c_el；
var-ctx；
可变宽度；
高度；
var圈；
var hexagon；
var hex_w；
var hex_h；
var hex_s；
var三角洲；
函数绘图六边形（点中心六边形、点圆、点扇形）{
var cur
;
cur={x:po_ctr_hex.x-0.5*hexagon.r，y:po_ctr_hex.y-delta}；
ctx.beginPath（）；
ctx.moveTo（当前x，当前y）；
电流x=电流x+六边形r；
cur.y=cur.y；
ctx.lineTo（当前x，当前y）；
电流x=电流x+六边形r/2；
电流y=电流y+d