如何在保持数字直立的同时旋转画布中的图表？

Question

我很想在画布中围绕其中心旋转图表，同时保持字母直立。我正在尝试使用 ctx.rotate(#) 但它使用似乎是画布左侧的中心旋转整个图表。

以下链接提供了一个视觉效果：我希望它看起来像绿色，而不是红色，就像它目前对我的代码所做的那样。 Visual Explanation

以下是JSFiddle：http://jsfiddle.net/ddxarcag/143/

我的代码如下：

    <script>
$(document).ready(function () {
  init();

function init() {
  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");
  draw(ctx);
}

function draw(ctx) {
  // layer1/Line
  ctx.rotate(00);
  ctx.beginPath();
  ctx.moveTo(75.1, 7.7);
  ctx.lineTo(162.9, 7.7);
  ctx.stroke();
  function WordSelector1() {
  var word = ['A', 'B', 'C'];
  var random = word[Math.floor(Math.random() * word.length)];
  return random;
}
  var x = WordSelector1();
  // layer1/P
  ctx.font = "12.0px 'Myriad Pro'";
    ctx.rotate(0);
  ctx.fillText(x, 60.0, 10.0);
}
 });
</script>

任何帮助将不胜感激。谢谢！

Answer 1

一旦您知道如何将原点 (0,0) 移动到另一个点，然后围绕该点旋转轴，在画布中绘制旋转图形就会有些容易。

为了不重复代码和解释，我在代码中添加了一些cmets。

我还将函数从 $(document).ready 中移出，并更改了一些数字以获得更四舍五入的值。

$(document).ready(function () {
  init();
});

function init() {
  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");
  draw(ctx);
}

function draw(ctx) {
  ctx.font = "12.0px 'Myriad Pro'";
  var angle = Math.random()*150; //Run more times to see other angles
    
  //This translates the 0,0 to the center of the horizontal line
  ctx.translate(100, 100);
  
  //This draws the original straight line
  ctx.beginPath();
  ctx.moveTo(-50, 0);  //The coordinates are relative to the new origin
  ctx.lineTo(50, 0);
  ctx.stroke();
  //Draw the first letter
  var x = WordSelector1();
  ctx.fillText(x, -60, 0);

  //This section draws the rotated line with the text straight

  //Rotate the canvas axes by "angle"
  ctx.rotate(angle * Math.PI/180);
  ctx.beginPath();
  ctx.moveTo(-50, 0); //The relative coordinates DO NOT change
  ctx.lineTo(50, 0); //This shows that the axes rotate, not the drawing
  ctx.stroke();

  var x = WordSelector1();
  ctx.translate(-60,0); //The origin must now move where the letter is to be placed
  ctx.rotate(-angle * Math.PI/180); //Counter-rotate by "-angle"
  ctx.fillText(x, 0, 0); //Draw the letter
}

function WordSelector1() {
  var word = ['A', 'B', 'C'];
  var random = word[Math.floor(Math.random() * word.length)];
  return random;
}

canvas{
  border: 1px solid;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="canvas" width="200" height="200"></canvas>

一个警告：在绘制完所有内容后，轴与画布边界平行，因为它旋转了 -angle，但原点是放置最后一个字母的位置。您可能希望使用ctx.save() 和ctx.restore() 来避免必须还原平移和旋转。