各図を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

あなたは、この2つの方法で近づくことができます変換。これにより、テキストを任意の角度で独立して回転させることができ、テキストと "論理"の場所を配置する方が簡単ですが、いくつかのステップが必要です。

コンテキスト全体を一度に回転します。これには、x軸がy軸になっているので、軸を「切り換える」必要があります。それはまた、回転を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>