如何将每个数字旋转90度？ [英] How rotate each figure by 90 degrees?

问题描述

我正在尝试绘制坐标系。我对横轴有问题。我需要将每个数字都转为90度。

我的尝试：

  var canvasGraphElem = document.getElementById（canvasGraph）; 
 canvasGraphElem.width = 300; 
 canvasGraphElem.height = 200; 
 var ctx = canvasGraphElem.getContext（'2d'）; （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（）; 
};  
 
 $  nfollow> jsfiddle  
 
 
 
结果应该如下所示： 
 
 
 图片上有数字 
解决方案
您可以采用以下两种方法：使用局部转换旋转文本。这允许您以任何角度单独旋转文本，并且放置文本和逻辑位置更容易，但需要多一些步骤。 
 
 
旋转整个背景一下子。这需要你开关轴，因为x轴现在是y和vica verse。它也将旋转限制在90°，您必须考虑切换轴。 
 
 
方法1 
 
 
 
 
 
 
  var ctx = document.querySelector（canvas）。getContext（2d）; ctx.font =10px sans-serif; ctx.textAlign =center; ctx.textBaseline =中间; for（var i = 0; i <= 300; i + = 30）{ctx.setTransform（1,0,0,1,10 + i，30）; //绝对变换ctx.rotate（-Math.PI * 0.25）; //任意角度（演示45°）ctx.fillText（i，0，0）;}; ctx.setTransform（1,0,0,1,0,0）; //重置变换 
 
 < 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）; //设置pivotctx.rotate（-Math.PI * 0.5）; //绕着pivotfor旋转画布-90°（var i = 0; i <= 300; i + = 30）{ctx.fillText（i，10，i）; //增加y，因为现在y = x}; ctx.setTransform（1,0,0,1,0,0）; //重置变换 
 
 < canvas>< / canvas> ;  
 
 
 
 
I'm trying to draw a coordinate system. I have a problem with the horizontal axis. I need to turn every number by 90 degrees.

my attempt:
  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

The result should look like this:

Image is teal with numbers
解决方案
You can approach this two ways:

Rotating text using local transformation. This allows you to rotate the text independently an at any angle and it's easier to place text and "logic" locations, but it requires a few more steps.

Rotate the whole context at once. This require you to "switch" axis as x axis is now y, and vica verse. It also limit the rotation to 90° and you have to think in terms of switched axis.

Method 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>





Method 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>





                        
这篇关于如何将每个数字旋转90度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！