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

示例代码和演示：

移至同心中心点
从中心点旋转
将x向右移动到半径
不旋转（所以字母是直立的）;
画出数字。
将所有转换重置为默认值

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);

是正确的用法。

同心圆中心的画布文字

2 个答案: