Canvas Text in Center of concentric circle

Question

我想把我的文本放在5個同心圓的中心！誰能幫幫我嗎！以下是我的代碼。建議我做些什麼改變，我應該做些什麼來獲得它在圈子的中心。謝謝。

 function circle(e, color, x, y, radius, startAngle, endAngle, clockwise) { 
      if (arguments.length < 9) return alert("Not enough arguments.\nThe function \"circle\" requires 9 arguments\nYou provided only " + arguments.length + "."); 
      e.beginPath(); 
      e.arc(x, y, radius, startAngle, endAngle, clockwise); 
      e.strokeStyle = color; 
      e.stroke(); 

     } 

     function draw(e) { 
      var deg360 = Math.PI * 2; 
      circle(e, "#00688B", 120, 120, 90, deg360, 0, deg360, true); 
      e.fillStyle = '#00688B'; 
      e.fill(); 
      circle(e, "#0099CC", 120, 120, 80, deg360, 0, deg360, true); 
      e.fillStyle = '#0099CC'; 
      e.fill(); 
      circle(e, "#63D1F4", 120, 120, 70, deg360, 0, deg360, true); 

      e.fillStyle = '#63D1F4'; 
      e.fill(); 
      circle(e, "#05EDFF", 120, 120, 60, deg360, 0, deg360, true); 
      e.fillStyle = '#05EDFF'; 
      e.fill(); 
      circle(e, "#BFEFFF", 120, 120, 50, deg360, 0, deg360, true); 
      e.fillStyle = '#BFEFFF'; 
      e.fill(); 
      circle(e, "#E6E8FA", 120, 120, 40, deg360, 0, deg360, true); 
      e.fillStyle = '#E6E8FA'; 
      e.fill(); 
      e.fill(); 
      e.fillStyle = "black"; // font color to write the text with 
      e.font = radius * 0.15 + "px arial"; 
      e.textBaseline = "middle"; 
      e.textAlign = "center"; 
      e.fillText(num, radius, e); 

      for (num = 1; num < 25; num++) { 
       ang = num * Math.PI/12; 
       e.rotate(ang); 
       e.translate(0, radius * 1.85); 
       e.rotate(-ang); 
       e.fillText(num.toString(), 0, 0); 
       e.rotate(ang); 
       e.translate(0, -radius * 1.85); 
       e.rotate(-ang);}} 

Answer 1

實施例的代碼和演示：

1. 移至同心中心點
2. 從中心點
3. 移動的x右向旋轉拉迪我們
4. 不旋轉（所以字母直立）;
5. 繪製數字。
6. 重置所有轉變爲默認

var canvas=document.getElementById("canvas"); 
 
var e=canvas.getContext("2d"); 
 
var cw=canvas.width; 
 
var ch=canvas.height; 
 

 
draw(e,40); 
 

 
function circle(e, color, x, y, radius, startAngle, endAngle, clockwise) { 
 
    if (arguments.length < 9) return alert("Not enough arguments.\nThe function \"circle\" requires 9 arguments\nYou provided only " + arguments.length + "."); 
 
    e.beginPath(); 
 
    e.arc(x, y, radius, startAngle, endAngle, clockwise); 
 
    e.strokeStyle = color; 
 
    e.stroke(); 
 
} 
 

 
function draw(e,radius) { 
 
    var deg360 = Math.PI * 2; 
 
    circle(e, "#00688B", 120, 120, 90, deg360, 0, deg360, true); 
 
    e.fillStyle = '#00688B'; 
 
    e.fill(); 
 
    circle(e, "#0099CC", 120, 120, 80, deg360, 0, deg360, true); 
 
    e.fillStyle = '#0099CC'; 
 
    e.fill(); 
 
    circle(e, "#63D1F4", 120, 120, 70, deg360, 0, deg360, true); 
 
    e.fillStyle = '#63D1F4'; 
 
    e.fill(); 
 
    circle(e, "#05EDFF", 120, 120, 60, deg360, 0, deg360, true); 
 
    e.fillStyle = '#05EDFF'; 
 
    e.fill(); 
 
    circle(e, "#BFEFFF", 120, 120, 50, deg360, 0, deg360, true); 
 
    e.fillStyle = '#BFEFFF'; 
 
    e.fill(); 
 
    circle(e, "#E6E8FA", 120, 120, 40, deg360, 0, deg360, true); 
 
    e.fillStyle = '#E6E8FA'; 
 
    e.fill(); 
 
    e.fill(); 
 
    e.fillStyle = "black"; // font color to write the text with 
 
    e.font = radius * 0.15 + "px arial"; 
 
    e.textBaseline = "middle"; 
 
    e.textAlign = "center"; 
 
    e.fillText(0, radius, e); 
 
    for (num = 1; num < 25; num++) { 
 
    ang = num * Math.PI/12; 
 
    // translate to concentric centerpoint 
 
    e.translate(120,120); 
 
    // rotate from the centerpoint 
 
    e.rotate(ang); 
 
    // move x-right to the radius 
 
    e.translate(radius,0); 
 
    // unrotate (so letters are upright); 
 
    e.rotate(-ang); 
 
    e.fillText(num.toString(), 0, 0); 
 
    // reset all transforms to default 
 
    e.setTransform(1,0,0,1,0,0); 
 
    } 
 
}

<canvas id="canvas" width=300 height=300></canvas>

Answer 2

我想你的代碼。首先我意識到radius沒有在任何地方定義。那麼它的定義在circle()，但你的代碼在底部將無法訪問它。函數參數的範圍僅限於該函數。

而且

e.fillText(num, radius, e); 

我不知道你想要做什麼，但你可能要查找的文檔fillText()。

context.fillText(text,xPos,yPos,maxWidth); 

是正確的用法。