Question

我在JavaScript中编写了一个循环，它将在HTML画布上呈现围绕中心六边形的同心六边形环。

我从最里面的戒指开始，在3点钟处绘制十字形，然后继续围成一圈，直到渲染完所有的六边形。然后我转到下一个戒指并重复。

当您以这种方式绘制六边形时（而不是仅使用x和y偏移来平铺它们）任何不能被60整除的六边形与中心十六边形的距离与可被60整除的六边形的距离不同（因为这些六边形包含较大的十六进制的扁平边，而不是顶点。

我遇到的问题是这些六角形（那些不能被60度整除的）渲染在一个略微偏离的位置。我不确定它是浮点数学问题，算法问题，生锈触发问题，还是简单的愚蠢。我打赌其中有3个。要切入追逐，请查看下面代码中的if (alpha % 60 !== 0)行。

作为一个信息点，我决定以这种方式绘制网格，因为我需要一种简单的方法将每个十六进制的坐标映射到数据结构中，每个十六进制由其中的环＃和ID＃标识。如果有更好的方法可以做到这一点，我会全力以赴，但是，我仍然想知道为什么我的渲染没有了。

这是我非常业余的代码，请耐心等待。

  <script type="text/javascript">
        window.addEventListener('load', eventWindowLoaded, false);
        function eventWindowLoaded() {
            canvasApp();
        }

    function canvasApp(){
        var xOrigin;
        var yOrigin;
        var scaleFactor = 30;

        var theCanvas = document.getElementById("canvas");
        var context;

        if (canvas.getContext) {
            context = theCanvas.getContext("2d");
            window.addEventListener('resize', resizeCanvas, false);
            window.addEventListener('orientationchange', resizeCanvas, false);
            resizeCanvas();
        }
        drawScreen();

        function resizeCanvas() {
            var imgData = context.getImageData(0,0, theCanvas.width, theCanvas.height);
            theCanvas.width = window.innerWidth;
            theCanvas.height = window.innerHeight;
            context.putImageData(imgData,0,0);
            xOrigin = theCanvas.width / 2;
            yOrigin = theCanvas.height / 2;
        }

        function drawScreen() {
            var rings = 3;
            var alpha = 0;
            var modifier = 1;

            context.clearRect(0, 0, theCanvas.width, theCanvas.height);
            drawHex(0,0);

            for (var i = 1; i<=rings; i++) {
                for (var j = 1; j<=i*6; j++) {
                     if (alpha % 60 !== 0) {
                         var h = modifier * scaleFactor / Math.cos(dtr(360 / (6 * i)));
                         drawHex(h * (Math.cos(dtr(alpha))), h * Math.sin(dtr(alpha)));
                    }
                    else {
                        drawHex(2 * scaleFactor * i * Math.cos(dtr(alpha)), 2 * scaleFactor * i * Math.sin(dtr(alpha)));
                    }
                    alpha += 360 / (i*6);
                }
                modifier+=2;
            }
        }

        function drawHex(xOff, yOff) {
            context.fillStyle = '#aaaaaa';
            context.strokeStyle = 'black';
            context.lineWidth = 2;
            context.lineCap = 'square';
            context.beginPath();
            context.moveTo(xOrigin+xOff-scaleFactor,yOrigin+yOff-Math.tan(dtr(30))*scaleFactor);
            context.lineTo(xOrigin+xOff,yOrigin+yOff-scaleFactor/Math.cos(dtr(30)));
            context.lineTo(xOrigin+xOff+scaleFactor,yOrigin+yOff-Math.tan(dtr(30))*scaleFactor);
            context.lineTo(xOrigin+xOff+scaleFactor,yOrigin+yOff+Math.tan(dtr(30))*scaleFactor);
            context.lineTo(xOrigin+xOff,yOrigin+yOff+scaleFactor/Math.cos(dtr(30)));
            context.lineTo(xOrigin+xOff-scaleFactor,yOrigin+yOff+Math.tan(dtr(30))*scaleFactor);
            context.closePath();
            context.stroke();
        }

        function dtr(ang) {
            return ang * Math.PI / 180;
        }

        function rtd(ang) {
            return ang * 180 / Math.PI;
        }
    }
    </script>

Answer 1

我认为您正在尝试使用径向坐标来表示不是圆形的东西。正如您所指出的那样，顶点六边形的（中心）确实以圆形排列，您可以使用基本的径向定位来展开它们。但是，非顶点的不是布置在该圆弧上，而是放在它的弦上（连接两个顶点六边形的线）。因此，您尝试对这些六边形使用常量h（半径）值的算法将无法正确显示它们。

您可以尝试从顶点六边形中插入非顶点六边形：顶点六边形之间K（N}非顶点六边形H的位置{ {1}}和VH1是：

VH2

e.g。在每个边缘有4个六边形的环（即2个非顶点六边形）中，查看3 o＆＃39;时钟和5 o＆＃39;时钟之间的六边形线：3 o＆＃39;时钟为0沿着该线的百分比，之后是1/3，下一个是2/3，而5点的时间是100％。或者，您可以将沿着该线的每个六边形视为＆＃34;推进＆＃34;通过两个顶点之间方向的预定矢量，直到到达线的末端。

所以基本上你的算法可以通过6个主顶点六边形，每次将六边形从当前顶点六边形内插到下一个六边形。因此，您可能应该有三个嵌套循环：一个用于环，一个用于环上的角度（总是六个步骤），另一个用于沿给定角度插入六边形（根据环编号的步数）。

Answer 2

男人花了我更长的时间，我想承认找到六边形圆圈的图案。我现在太累了解释，因为我认为我需要做一些辅助插图来解释它。

简而言之，每个＆＃34;圈＆＃34;六边形的形状本身是六边形的。沿一条边的六边形形状数与中心的台阶数相同。

＆＃13;

var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
c.width = 500;
c.height = 500;


var hexRadius = 20;
var innerCircleRadius = hexRadius/2*Math.sqrt(3);
var TO_RADIANS = Math.PI/180;

function drawHex(x,y) {
    var r = hexRadius;
    ctx.beginPath();
    ctx.moveTo(x,y-r);
    for (var i = 0; i<=6; i++) {
         ctx.lineTo(x+Math.cos((i*60-90)*TO_RADIANS)*r,y+Math.sin((i*60-90)*TO_RADIANS)*r);
    }
    ctx.closePath();
    ctx.stroke();
}

drawHexCircle(250,250,4);

function drawHexCircle(x,y,circles) {
    var rc = innerCircleRadius;
    drawHex(250,250); //center
    
    for (var i = 1; i<=circles; i++) {
        for (var j = 0; j<6; j++) {
            var currentX = x+Math.cos((j*60)*TO_RADIANS)*rc*2*i;
            var currentY = y+Math.sin((j*60)*TO_RADIANS)*rc*2*i;
                drawHex(currentX,currentY);
            for (var k = 1; k<i; k++) {
                var newX = currentX + Math.cos((j*60+120)*TO_RADIANS)*rc*2*k;
                var newY = currentY + Math.sin((j*60+120)*TO_RADIANS)*rc*2*k;
                drawHex(newX,newY);
            }
        }
    }
    
}

＆＃13;

canvas {
    border: 1px solid black;
}

＆＃13;

<canvas id="canvas"></canvas>

＆＃13;

在Canvas上渲染同心十六进制

2 个答案: