数字を直立させてキャンバスで図を回転させるにはどうすればよいですか？

Question

私は文字を直立に保ちながら、図を中心にキャンバス内で回転させようとしています。私はctx.rotate（＃）を使用しようとしていますが、カンバスの左側が中心に見えるものを使ってダイアグラム全体を回転しています。

次のリンクはビジュアルを提供しています。現在は自分のコードと同じように、赤ではなく緑のように見えます。 Visual Explanation

次はJSFiddleです：http://jsfiddle.net/ddxarcag/143/

そして、私のコードは以下の通りです：

<script> 
$(document).ready(function() { 
    init(); 

function init() { 
    var canvas = document.getElementById("canvas"); 
    var ctx = canvas.getContext("2d"); 
    draw(ctx); 
} 

function draw(ctx) { 
    // layer1/Line 
    ctx.rotate(00); 
    ctx.beginPath(); 
    ctx.moveTo(75.1, 7.7); 
    ctx.lineTo(162.9, 7.7); 
    ctx.stroke(); 
    function WordSelector1() { 
    var word = ['A', 'B', 'C']; 
    var random = word[Math.floor(Math.random() * word.length)]; 
    return random; 
} 
    var x = WordSelector1(); 
    // layer1/P 
    ctx.font = "12.0px 'Myriad Pro'"; 
    ctx.rotate(0); 
    ctx.fillText(x, 60.0, 10.0); 
} 
}); 
</script> 

すべてのヘルプははるかに高く評価されるだろう。ありがとう！

Answer 1

回転したグラフをキャンバスに描画することは、原点（0,0）を別の点に移動して軸を回転させる方法を理解したらやや簡単です。

コードと説明を繰り返さないように、コードにいくつかのコメントを追加しました。

また、$(document).readyから機能を移動し、より丸い値のためにいくつかの数値を変更しました。

$(document).ready(function() { 
 
    init(); 
 
}); 
 

 
function init() { 
 
    var canvas = document.getElementById("canvas"); 
 
    var ctx = canvas.getContext("2d"); 
 
    draw(ctx); 
 
} 
 

 
function draw(ctx) { 
 
    ctx.font = "12.0px 'Myriad Pro'"; 
 
    var angle = Math.random()*150; //Run more times to see other angles 
 
    
 
    //This translates the 0,0 to the center of the horizontal line 
 
    ctx.translate(100, 100); 
 
    
 
    //This draws the original straight line 
 
    ctx.beginPath(); 
 
    ctx.moveTo(-50, 0); //The coordinates are relative to the new origin 
 
    ctx.lineTo(50, 0); 
 
    ctx.stroke(); 
 
    //Draw the first letter 
 
    var x = WordSelector1(); 
 
    ctx.fillText(x, -60, 0); 
 

 
    //This section draws the rotated line with the text straight 
 

 
    //Rotate the canvas axes by "angle" 
 
    ctx.rotate(angle * Math.PI/180); 
 
    ctx.beginPath(); 
 
    ctx.moveTo(-50, 0); //The relative coordinates DO NOT change 
 
    ctx.lineTo(50, 0); //This shows that the axes rotate, not the drawing 
 
    ctx.stroke(); 
 

 
    var x = WordSelector1(); 
 
    ctx.translate(-60,0); //The origin must now move where the letter is to be placed 
 
    ctx.rotate(-angle * Math.PI/180); //Counter-rotate by "-angle" 
 
    ctx.fillText(x, 0, 0); //Draw the letter 
 
} 
 

 
function WordSelector1() { 
 
    var word = ['A', 'B', 'C']; 
 
    var random = word[Math.floor(Math.random() * word.length)]; 
 
    return random; 
 
}

canvas{ 
 
    border: 1px solid; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<canvas id="canvas" width="200" height="200"></canvas>

一つ警告：すべてはそれは-angleによって回転されたため、軸がキャンバスの境界線に平行に終わる描かれているが、最後の文字が置かれた場所の起源がある後。翻訳と回転を元に戻さないようにするには、ctx.save()とctx.restore()を使用します。