Question

我创建了一个程序，它应该在屏幕上显示50个圆圈，每个圆圈上有一个1-50的数字，但数字只出现在第一行而不是其余部分。我希望每个数字都有一些...固定在圆圈内部，以便稍后当我调用其中一个数字时，它会与圆圈一起出现。这是我的代码。

＆＃13;

var i;
var texts = [];

for(i=1;i<=50;i++){
  texts[i]=i;
}

var canvas = document.getElementById('mindMap');
var ctx = canvas.getContext('2d');
var w = 50;
var h = 50;
var r = 30;

for (var i = 1; i <=texts.length; ++i) {
  ctx.beginPath();

  if((i>=10)&&(i<=20)){
    ctx.arc(w-630, h+70, r, 0, 2*Math.PI);
    ctx.fillStyle = 'black';
    ctx.font = '12px Arial';
    ctx.textAlign  = 'center';
    ctx.fillText(texts[i], w-630, h+70);
  }
  else if((i>=21)&&(i<=31)){
    ctx.arc(w-1400, h+140, r, 0, 2*Math.PI);
  }
  else if((i>=32)&&(i<=42)){
    ctx.arc(w-2170, h+222, r, 0, 2*Math.PI);
  }
  else if(i>=43){
    ctx.arc(w-2940, h+300, r, 0, 2*Math.PI);
  }
  if((i>=1)&&(i<=9)){
    ctx.arc(w, h, r, 0, 2*Math.PI);
  }
  ctx.fillStyle = '#C0B7EE';  
  ctx.fill();
  ctx = canvas.getContext('2d');
  ctx.fillStyle = 'black';
  ctx.font = '12px Arial';
  ctx.textAlign  = 'center';
  ctx.fillText(texts[i], w, h);
  w += 70; 
}

＆＃13;

<canvas id="mindMap" width="800" height="800" style="border:1px solid red">
  <p>Your browser doesn't support canvas.</p>
</canvas>

＆＃13;

Answer 1

我删除了很多代码，你的解释没有说明为什么需要它。如果这不是您想要的，请添加有关该目标的更多信息。

var canvas = document.getElementById('mindMap');
var ctx = canvas.getContext('2d');
ctx.font = '12px Arial';
ctx.textAlign  = 'center';

var w = 50;
var h = 50;
var r = 30;

for (var i = 1; i <= 50; ++i) {
  ctx.beginPath();
  ctx.arc(w, h, r, 0, 2*Math.PI);
  ctx.fillStyle = '#C0B7EE';  
  ctx.fill();
  
  ctx.fillStyle = 'black';
  ctx.fillText(i, w, h + 5);
  
  w += 70;
  if (i % 11 === 0) {
    h += 70;
    w = 50;
  }
}

<canvas id="mindMap" width="800" height="800" style="border:1px solid red">
  <p>Your browser doesn't support canvas.</p>
</canvas>

Answer 2

对我来说，似乎w变量在每一行之后没有被重置。当您产生圆圈时，您已经使用w-1400修复了它。你从来没有在文本上做过。您还需要h+=70。或者它不会下到下一行。

如何将文本放在圆圈内

2 个答案: