Question

我想显示一个六边形网格，其中每个单元格都在系统中显示其坐标（因此，最左上方的单元格将写入a1，紧靠其右侧的单元格将写入b1在其中，等等）。下面的代码旨在实现这一目标（并且几乎可以做到）。但是，所有文本都挤在一个小地方（即使我在代码的第48行指定了位置，并且由于图像的其余部分都很好，所以该位置似乎是正确的）。我在做什么错了？

<html>
<head>
  <meta charset="utf-8">
  <title>Hex board</title>
  <script type="text/javascript">
  var r = 20;
  var w = r*2*(Math.sqrt(3)/2);
  var ctx;
  var mainWidth = 850;
  var mainHeight = 600;
  var dim = 11;
  var i,x,y, txt;
  var alphabet =["a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z"];

  function textFromCoordinates(x,y)
  {
    return(alphabet[x]+(y+1));
  }

  function drawHexagon(c, x, y, r)
  {
      c.beginPath();
      c.moveTo(x, y-r);
      for(i=0; i<6; i++) {
          c.lineTo(x+r*Math.cos(Math.PI*(1.5+1/3*i)), y+r*Math.sin(Math.PI*(1.5+1/3*i)));
      }
      c.closePath();
      c.fill();
      c.stroke();
  }

  function draw()
  {
      ctx.clearRect(0, 0, mainWidth, mainHeight);
      ctx.lineWidth = 1;

      ctx.strokeStyle = "white";
      for(y=0; y<dim; y++)
      {
          for(x=0; x<dim; x++)
          {
              ctx.fillStyle = "rgb(" + (x+241) + "," + (y+220) + ",178)";
              drawHexagon(ctx, (x+y)*w - (y-4)*(w/2), (y+2)*1.5*r, r);

              txt = textFromCoordinates(x,y);
              ctx.font = 'italic 40pt Calibri';
              ctx.fillStyle = "black";
              ctx.moveTo((x+y)*w - (y-4)*(w/2), (y+2)*1.5*r);
              ctx.fillText(txt,mainWidth/dim,mainHeight/dim);
          }
      }

  }


  function load()
  {
      var canvas = document.getElementById("output");
      ctx = canvas.getContext("2d");
      draw();
  }

  </script>
</head>
<body onload="load()">
    <canvas style="position:absolute,top:0px,left:20px" width="850" height="600" id="output">Canvas not supported...</canvas>
</body>
</html>

Answer 1

您需要在与六边形相同的坐标处绘制文本：

ctx.fillText(txt,(x+y)*w - (y-4)*(w/2),(y+2)*1.5*r);

我也将字体更改为较小的尺寸，并在中心对齐：

ctx.font = 'italic 16px Calibri';
ctx.textAlign = "center"; 
ctx.textBaseline = "middle";

我希望这是您所需要的。

var r = 20;
  var w = r*2*(Math.sqrt(3)/2);
  var ctx;
  var mainWidth = 850;
  var mainHeight = 600;
  var dim = 11;
  var i,x,y, txt;
  var alphabet =["a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z"];

  function textFromCoordinates(x,y)
  {
    return(alphabet[x]+(y+1));
  }

  function drawHexagon(c, x, y, r)
  {
      c.beginPath();
      c.moveTo(x, y-r);
      for(i=0; i<6; i++) {
          c.lineTo(x+r*Math.cos(Math.PI*(1.5+1/3*i)), y+r*Math.sin(Math.PI*(1.5+1/3*i)));
      }
      c.closePath();
      c.fill();
      c.stroke();
  }

  function draw()
  {
      ctx.clearRect(0, 0, mainWidth, mainHeight);
      ctx.lineWidth = 1;

      ctx.strokeStyle = "white";
      for(y=0; y<dim; y++)
      {
          for(x=0; x<dim; x++)
          {
              ctx.fillStyle = "rgb(" + (x+241) + "," + (y+220) + ",178)";
              drawHexagon(ctx, (x+y)*w - (y-4)*(w/2), (y+2)*1.5*r, r);

              txt = textFromCoordinates(x,y);
              ctx.font = 'italic 16px Calibri';
              ctx.textAlign = "center"; 
              ctx.textBaseline = "middle";
              ctx.fillStyle = "black";
              
              ctx.fillText(txt,(x+y)*w - (y-4)*(w/2),(y+2)*1.5*r);
          }
      }

  }


  function load()
  {
      var canvas = document.getElementById("output");
      ctx = canvas.getContext("2d");
      draw();
  }


load()

canvas{border:1px solid}

<canvas style="position:absolute,top:0px,left:20px" width="850" height="600" id="output">Canvas not supported...</canvas>

HTML5画布中的所有fillTexted文本都挤在一个位置

1 个答案: