javascript - 同心圆中心的 Canvas 文本

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>