html5キャンバスを使用して円内の異なる角度で異なる値を表示

Question

HTML5キャンバスとJavaScriptを使用するサークル内の異なる角度で異なる値（ドットで表すことがある）を表示する必要があります。

例のデータ：0°@
valを34％、12°@
valを54％、70°@
ヴァル23％、
のように...

私が持っている場合キャンバス300 x 300ピクセル、サークルの中心はx：150ピクセル、y：150ピクセル、半径は150ピクセルです。ドットを設定する場所はどこで12度で54％ですか？

私の数学はちょっとひどいのxD

私は助けのいずれかの種類を感謝し、私は十分に自分自身を明確にしていない場合は質問してくださいしたいです。

はリスニングをありがとう、あなたの深い洞察に前もって感謝：D

EDIT（より詳細に説明すると）：ここで

は私が達成しようとしているものを説明するためのイメージです。

これは私の質問を少し理解してくれることを願っています。
（ご覧のとおり、上記と同じ値ではありません）

Ty

Answer 1

あなたはデカルトのものに極座標（半径、角度）から変換するために、これを使用することがあります。

例えば

// θ : angle in [0, 2π[ 
function polarToCartesian(r, θ) { 
    return {x:r*Math.cos(θ), y: r*Math.sin(θ)}; 
} 

あなたは12°で描画したい場合、あなたはこのようにポイントを計算することができる。

var p = polarToCartesian(150, 12*2*Math.PI/360); 
p.x += 150; p.y += 150; 

EDIT：私polarToCartesian機能は、キャンバスのAPIの多くの機能として、入力としてradiansを取ります。あなたは度以上使用している場合は、これを必要とする場合があります。ここでは

function degreesToRadians(a) { 
    return Math.PI*a/180; 
} 

Answer 2

あなたが行く（demo）

var can = document.getElementById('mycanvas'); 
var ctx = can.getContext('2d'); 

var drawAngledLine = function(x, y, length, angle) { 
    var radians = angle/180 * Math.PI; 
    var endX = x + length * Math.cos(radians); 
    var endY = y - length * Math.sin(radians); 

    ctx.beginPath(); 
    ctx.moveTo(x, y) 
    ctx.lineTo(endX, endY); 
    ctx.closePath(); 
    ctx.stroke(); 
} 

var drawCircle = function(x, y, r) { 
    ctx.beginPath(); 
    ctx.arc(x, y, r, 0, Math.PI*2, true); 
    ctx.closePath(); 
    ctx.fill(); 
} 

var drawDot = function(x, y, length, angle, value) { 
    var radians = angle/180 * Math.PI; 
    var endX = x + length*value/100 * Math.cos(radians); 
    var endY = y - length*value/100 * Math.sin(radians); 
    drawCircle(endX, endY, 2); 
} 

var drawText = function(x, y, length, angle, value) { 
    var radians = angle/180 * Math.PI; 
    var endX = x + length*value/100 * Math.cos(radians); 
    var endY = y - length*value/100 * Math.sin(radians); 
    console.debug(endX+","+endY); 
    ctx.fillText(value+"%", endX+15, endY+5); 
    ctx.stroke(); 
} 

var visualizeData = function(x, y, length, angle, value) { 

    ctx.strokeStyle = "#999"; 
    ctx.lineWidth = "1"; 
    drawAngledLine(x, y, length, angle); 

    ctx.fillStyle = "#0a0"; 
    drawDot(x, y, length, angle, value); 

    ctx.fillStyle = "#666"; 
    ctx.font = "bold 10px Arial"; 
    ctx.textAlign = "center"; 
    drawText(x, y, length, angle, value); 
} 

ctx.fillStyle = "#FFF0B3"; 
drawCircle(150, 150, 150); 

visualizeData(150, 150, 150, 0, 34); 
visualizeData(150, 150, 150, 12, 54); 
visualizeData(150, 150, 150, 70, 23) 

visualizeData(150, 150, 150, 120, 50); 
visualizeData(150, 150, 150, -120, 80); 
visualizeData(150, 150, 150, -45, 60);