【问题标题】：How rotate each figure by 90 degrees?如何将每个图形旋转 90 度？
【发布时间】：2023-03-21 21:42:01
【问题描述】：

我正在尝试绘制坐标系。我的水平轴有问题。我需要将每个数字旋转 90 度。

我的尝试：

  var canvasGraphElem = document.getElementById("canvasGraph");  
  canvasGraphElem.width = 300;
  canvasGraphElem.height = 200; 
  var ctx = canvasGraphElem.getContext('2d');

  for(var i = 0; i <= 300; i = i + 30) {
    ctx.save();
    ctx.font = "10px Arial";
    ctx.textAlign = "right";
    ctx.translate(140, 140);
    ctx.rotate(-Math.PI/2);
    ctx.fillText(i, 0 + i, 0 - 25);
    ctx.restore();
  };

jsfiddle

结果应该是这样的：

Image is teal with numbers

【问题讨论】：

一旦你变换了画布矩阵，每个绘图操作的坐标也会被变换。因此，如果将上下文旋转 90 度，x 轴将变为 y 轴，反之亦然。：jsfiddle.net/c84uugwq/2

标签： javascript html rotation html5-canvas

【解决方案1】：

您可以通过以下两种方式进行处理：

使用局部变换旋转文本。这允许您以任意角度独立旋转文本，并且更容易放置文本和“逻辑”位置，但需要更多步骤。

一次旋转整个上下文。这需要您“切换”轴，因为 x 轴现在是 y，而 vica verse。它还将旋转限制为 90°，您必须考虑切换轴。

方法一

var ctx = document.querySelector("canvas").getContext("2d");

ctx.font = "10px sans-serif";
ctx.textAlign = "center";
ctx.textBaseline  = "middle";

for(var i = 0; i <= 300; i += 30) {
  ctx.setTransform(1, 0, 0, 1, 10 + i, 30);   // absolute transform
  ctx.rotate(-Math.PI*0.25);                  // any angle (demo 45°)
  ctx.fillText(i, 0, 0);
};

ctx.setTransform(1, 0, 0, 1, 0, 0);           // reset transforms

&lt;canvas&gt;&lt;/canvas&gt;

方法二

var ctx = document.querySelector("canvas").getContext("2d");

ctx.font = "10px sans-serif";
ctx.textAlign = "center";
ctx.textBaseline  = "middle";
ctx.translate(20, 30);                        // set pivot
ctx.rotate(-Math.PI*0.5);                     // rotate canvas -90° around pivot

for(var i = 0; i <= 300; i += 30) {
  ctx.fillText(i, 10, i);                     // increase y, since now "y=x"
};

ctx.setTransform(1, 0, 0, 1, 0, 0);           // reset transforms

&lt;canvas&gt;&lt;/canvas&gt;

【讨论】：