轮子内的 HTML5 画布文本方向圆圈答案

【问题标题】：HTML5 canvas text orientation circle inside wheel轮子内的 HTML5 画布文本方向圆圈
【发布时间】：2019-03-05 06:18:46
【问题描述】：

https://jsfiddle.net/5e7hwn8m/

嗨，我正在尝试设置一个带有数字的轮子，然后在从 A 到 F（A、B、C、D、E 和 F）标识的选定的轮子中。

问题是 A-F 像数字一样旋转，我不希望这样，而且我似乎不知道该怎么做才能让它们面向我的方向。

谁能指出我正确的方向？ jsfiddle代码供参考：https://jsfiddle.net/5e7hwn8m/

var wheelNumbers = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30", "31", "32", "33", "34", "35", "36", "37", "38", "39", "40", "41", "42", "43", "44", "45", "46", "47", "48", "49", "50", "51", "52", "53", "54", "55", "56", "57", "58", "59"];
//16 20 18 55 5 25
var wheelABCDEF = ["", "", "", "", "E", "", "", "", "",
  "", "", "", "", "", "", "A", "", "C", "",
  "B", "", "", "", "", "F", "", "", "", "", "",
  "", "", "", "", "", "", "", "", "",
  "", "", "", "", "", "", "", "", "", "",
  "", "", "", "", "", "D", "", "", "", ""
];


var backgroundColours = ["#ffff00", "#ffff00", "#ffff00", "#ffff00", "#005def", "#ffff00", "#ffff00", "#ffff00", "#ffff00", "#66ffff", "#66ffff", "#66ffff", "#66ffff", "#66ffff", "#66ffff", "#005def", "#66ffff", "#005def", "#66ffff", "#005def", "#c0c0c0", "#c0c0c0", "#c0c0c0", "#c0c0c0", "#005def", "#c0c0c0", "#c0c0c0", "#c0c0c0", "#c0c0c0", "#33cc33", "#33cc33", "#33cc33", "#33cc33", "#33cc33", "#33cc33", "#33cc33", "#33cc33", "#33cc33", "#33cc33", "#ff99ff", "#ff99ff", "#ff99ff", "#ff99ff", "#ff99ff", "#ff99ff", "#ff99ff", "#ff99ff", "#ff99ff", "#ff99ff", "#ffffbb", "#ffffbb", "#ffffbb", "#ffffbb", "#ffffbb", "#005def", "#ffffbb", "#ffffbb", "#ffffbb", "#ffffbb"];
var startAngle = 4.7;
var arc = Math.PI / (wheelNumbers.length / 2);


var ctx;

function drawWheel() {
  var canvas = document.getElementById("canvas");

  canvas.width = canvas.scrollWidth;
  canvas.height = canvas.scrollHeight;

  if (canvas.getContext) {
    var outsideRadius = 150;
    var insideRadius = 120;
    var textRadius = 160;

    ctx = canvas.getContext("2d");
    //ctx.clearRect(0,0,400,400);

    //ctx.strokeStyle = "black";
    ctx.lineWidth = 0.8;

    ctx.font = 'bold 12px Helvetica, Arial';

    for (var i = 0; i < wheelNumbers.length; i++) {
      var angle = startAngle + i * arc;
      ctx.fillStyle = backgroundColours[i];

      ctx.beginPath();
      ctx.arc(200, 200, outsideRadius, angle, angle + arc, false);
      ctx.arc(200, 200, insideRadius, angle + arc, angle, true);
      ctx.stroke();
      ctx.fill();
      //
      ctx.save();
      //ctx.shadowOffsetX = -1;
      //ctx.shadowOffsetY = -1;
      //ctx.shadowBlur    = 0;
      //ctx.shadowColor   = "rgb(220,220,220)";
      //'#005def'
      ctx.fillStyle = '#444';
      ctx.translate(200 + Math.cos(angle + arc / 2) * textRadius, 200 + Math.sin(angle + arc / 2) * textRadius);
      ctx.rotate(angle + arc / 2 + Math.PI / 2);
      var text = wheelNumbers[i];
      ctx.fillText(text, -ctx.measureText(text).width / 2, 0);

      text = wheelABCDEF[i];
      ctx.fillStyle = '#005def';

      ctx.rotate(0);
      ctx.fillText(text, 0, 60);


      ctx.restore();

    }

  }
}



drawWheel();

html,
body {
  margin: 0;
  padding: 0;
}

<!DOCTYPE html>
<html>

  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/p5.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/addons/p5.dom.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/addons/p5.sound.min.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="utf-8" />

  </head>

  <body>
    <canvas id="canvas" width="400" height="400"></canvas>

    <script src="sketch.js"></script>
  </body>

</html>

谢谢！

【问题讨论】：

标签： javascript html canvas text rotation

【解决方案1】：

我不太确定这是否是您要问的。我正在计算字母应该出现的点，并且我正在绘制字母而不旋转。在代码中我已经标记了我所做的更改。

var wheelNumbers = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30", "31", "32", "33", "34", "35", "36", "37", "38", "39", "40", "41", "42", "43", "44", "45", "46", "47", "48", "49", "50", "51", "52", "53", "54", "55", "56", "57", "58", "59"];
//16 20 18 55 5 25
var wheelABCDEF = ["", "", "", "", "E", "", "", "", "",
  "", "", "", "", "", "", "A", "", "C", "",
  "B", "", "", "", "", "F", "", "", "", "", "",
  "", "", "", "", "", "", "", "", "",
  "", "", "", "", "", "", "", "", "", "",
  "", "", "", "", "", "D", "", "", "", ""
];


var backgroundColours = ["#ffff00", "#ffff00", "#ffff00", "#ffff00", "#005def", "#ffff00", "#ffff00", "#ffff00", "#ffff00", "#66ffff", "#66ffff", "#66ffff", "#66ffff", "#66ffff", "#66ffff", "#005def", "#66ffff", "#005def", "#66ffff", "#005def", "#c0c0c0", "#c0c0c0", "#c0c0c0", "#c0c0c0", "#005def", "#c0c0c0", "#c0c0c0", "#c0c0c0", "#c0c0c0", "#33cc33", "#33cc33", "#33cc33", "#33cc33", "#33cc33", "#33cc33", "#33cc33", "#33cc33", "#33cc33", "#33cc33", "#ff99ff", "#ff99ff", "#ff99ff", "#ff99ff", "#ff99ff", "#ff99ff", "#ff99ff", "#ff99ff", "#ff99ff", "#ff99ff", "#ffffbb", "#ffffbb", "#ffffbb", "#ffffbb", "#ffffbb", "#005def", "#ffffbb", "#ffffbb", "#ffffbb", "#ffffbb"];
var startAngle = 4.7;
var arc = Math.PI / (wheelNumbers.length / 2);


var ctx;

function drawWheel() {
  var canvas = document.getElementById("canvas");

  canvas.width = canvas.scrollWidth;
  canvas.height = canvas.scrollHeight;

  if (canvas.getContext) {
    var outsideRadius = 150;
    var insideRadius = 120;
    var textRadius = 160;

    ctx = canvas.getContext("2d");
    //ctx.clearRect(0,0,400,400);

    //ctx.strokeStyle = "black";
    ctx.lineWidth = 0.8;

    ctx.font = 'bold 12px Helvetica, Arial';

    for (var i = 0; i < wheelNumbers.length; i++) {
      var angle = startAngle + i * arc;
      ctx.fillStyle = backgroundColours[i];

      ctx.beginPath();
      ctx.arc(200, 200, outsideRadius, angle, angle + arc, false);
      ctx.arc(200, 200, insideRadius, angle + arc, angle, true);
      ctx.stroke();
      ctx.fill();
      //
      ctx.save();
      //ctx.shadowOffsetX = -1;
      //ctx.shadowOffsetY = -1;
      //ctx.shadowBlur    = 0;
      //ctx.shadowColor   = "rgb(220,220,220)";
      //'#005def'
      ctx.fillStyle = '#444';
      
      /////////////////////////////////////////////////
      // calculating the position for the letter
      var x = 200 + Math.cos(angle + arc / 2) * 100;
      var y = 200 + Math.sin(angle + arc / 2) * 100;
      /////////////////////////////////////////////////
      
      ctx.translate(200 + Math.cos(angle + arc / 2) * textRadius, 200 + Math.sin(angle + arc / 2) * textRadius);
      ctx.rotate(angle + arc / 2 + Math.PI / 2);
      var text = wheelNumbers[i];
      ctx.fillText(text, -ctx.measureText(text).width / 2, 0);
      ctx.restore();// restore goes here
      
      
      text = wheelABCDEF[i];
      ctx.fillStyle = '#005def';

      // paint the letter  without rotating
      ctx.fillText(text, x, y);


      

    }

  }
}



drawWheel();

&lt;canvas id="canvas" width="400" height="400"&gt;&lt;/canvas&gt;

【讨论】：

我很高兴它可以工作@user4561667。在这种情况下，您会考虑接受我的回答吗？

【解决方案2】：

一种方法是在你的轮子之后渲染你的字母。

您可以使用它们在阵列中的位置来确定它们在车轮上的角度。比使用 cos 和 sin 找到它们的像素位置。

【讨论】：

【解决方案3】：

你的问题是 ctx.rotate() 是相对于当前的矩阵变换，或者如果你愿意的话，是相对于当前的旋转角度。

这意味着您的rotate(0) 将无能为力。你想要的是rotate( -currentAngle )。
但在调用它之前，您必须将文本的位置设置为旋转的枢轴，即作为我们变换矩阵的原点，这可以通过调用 ctx.translate(text_x, text_x) 来完成，因为我们现在在文本位置，我们可以用0, 0个参数调用fillText：

// set the origin to the text's position
ctx.translate(0,60);
// reverse rotate
ctx.rotate(-currentAngle);
// draw at origin (0,0)
ctx.fillText(text, 0, 0);

var wheelNumbers = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30", "31", "32", "33", "34", "35", "36", "37", "38", "39", "40", "41", "42", "43", "44", "45", "46", "47", "48", "49", "50", "51", "52", "53", "54", "55", "56", "57", "58", "59"];
//16 20 18 55 5 25
var wheelABCDEF = ["", "", "", "", "E", "", "", "", "",
  "", "", "", "", "", "", "A", "", "C", "",
  "B", "", "", "", "", "F", "", "", "", "", "",
  "", "", "", "", "", "", "", "", "",
  "", "", "", "", "", "", "", "", "", "",
  "", "", "", "", "", "D", "", "", "", ""
];


var backgroundColours = ["#ffff00", "#ffff00", "#ffff00", "#ffff00", "#005def", "#ffff00", "#ffff00", "#ffff00", "#ffff00", "#66ffff", "#66ffff", "#66ffff", "#66ffff", "#66ffff", "#66ffff", "#005def", "#66ffff", "#005def", "#66ffff", "#005def", "#c0c0c0", "#c0c0c0", "#c0c0c0", "#c0c0c0", "#005def", "#c0c0c0", "#c0c0c0", "#c0c0c0", "#c0c0c0", "#33cc33", "#33cc33", "#33cc33", "#33cc33", "#33cc33", "#33cc33", "#33cc33", "#33cc33", "#33cc33", "#33cc33", "#ff99ff", "#ff99ff", "#ff99ff", "#ff99ff", "#ff99ff", "#ff99ff", "#ff99ff", "#ff99ff", "#ff99ff", "#ff99ff", "#ffffbb", "#ffffbb", "#ffffbb", "#ffffbb", "#ffffbb", "#005def", "#ffffbb", "#ffffbb", "#ffffbb", "#ffffbb"];
var startAngle = 4.7;
var arc = Math.PI / (wheelNumbers.length / 2);


var ctx;

function drawWheel() {
  var canvas = document.getElementById("canvas");

  canvas.width = canvas.scrollWidth;
  canvas.height = canvas.scrollHeight;

  if (canvas.getContext) {
    var outsideRadius = 150;
    var insideRadius = 120;
    var textRadius = 160;

    ctx = canvas.getContext("2d");
    //ctx.clearRect(0,0,400,400);

    //ctx.strokeStyle = "black";
    ctx.lineWidth = 0.8;

    ctx.font = 'bold 12px Helvetica, Arial';

    for (var i = 0; i < wheelNumbers.length; i++) {
      var angle = startAngle + i * arc;
      ctx.fillStyle = backgroundColours[i];

      ctx.beginPath();
      ctx.arc(200, 200, outsideRadius, angle, angle + arc, false);
      ctx.arc(200, 200, insideRadius, angle + arc, angle, true);
      ctx.stroke();
      ctx.fill();
      //
      ctx.save();
      //ctx.shadowOffsetX = -1;
      //ctx.shadowOffsetY = -1;
      //ctx.shadowBlur    = 0;
      //ctx.shadowColor   = "rgb(220,220,220)";
      //'#005def'
      ctx.fillStyle = '#444';
      ctx.translate(200 + Math.cos(angle + arc / 2) * textRadius, 200 + Math.sin(angle + arc / 2) * textRadius);
/* BEGIN EDIT*/
      // save the currentAngle in a variable
      var currentAngle = angle + arc / 2 + Math.PI / 2;
      ctx.rotate(currentAngle);
      var text = wheelNumbers[i];
      ctx.fillText(text, -ctx.measureText(text).width / 2, 0);

      text = wheelABCDEF[i];
      ctx.fillStyle = '#005def';
      // set the origin to the text's position
      ctx.translate(0,60);
      // reverse rotate
      ctx.rotate(-currentAngle);
      // draw at origin (0,0)
      ctx.fillText(text, 0, 0);
/* END EDIT*/
      ctx.restore();

    }

  }
}



drawWheel();

html,
body {
  margin: 0;
  padding: 0;
}

<!DOCTYPE html>
<html>

  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/p5.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/addons/p5.dom.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/addons/p5.sound.min.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="utf-8" />

  </head>

  <body>
    <canvas id="canvas" width="400" height="400"></canvas>

    <script src="sketch.js"></script>
  </body>

</html>

【讨论】：