如何将每个图形旋转 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();
  }; 

提琴手

结果应如下所示：

图像是带数字的青色

Answer 1

你可以通过两种方式来处理：

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

一次旋转整个上下文。 这需要您“切换”轴，因为 x 轴现在是 y，反之亦然。 它还将旋转限制为 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

 <canvas></canvas>

方法二

 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>