如何将每个数字旋转90度？

Question

我试图画一个坐标系。我的横轴有问题。我需要将每个数字都旋转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

Answer 1

您可以采用以下两种方式：

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

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

方法1

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

<canvas></canvas>

方法2

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

<canvas></canvas>