如何将每个图形旋转90度

How rotate each figure by 90 degrees?

本文关键字：图形 旋转 90度      更新时间：2023-09-26

我正在尝试绘制一个坐标系。我的横轴有问题。我需要把每个数字都转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

结果应该是这样的：

图像为青色，数字为

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

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

一次旋转整个上下文。这需要你"切换"轴，因为x轴现在是y，vica verse。它还将旋转限制在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>

相关文章：