Anzeige verschiedener Werte in verschiedenen Winkeln in einem Kreis mit html5 canvas

Question

Mit HTML5 Canvas und Javascript muss ich verschiedene Werte (durch einen Punkt vielleicht dargestellt) in verschiedenen Winkeln innerhalb eines Kreises anzeigen.

Beispiel Daten:
val 34% @ 0 °,
val 54% @ 12 °,
val 23% @ 70 °,
und so weiter ...

Wenn ich habe Leinwand 300 x 300px und die Mitte des Kreises befindet sich bei x: 150px und y: 150px mit einem Radius von 150px, wie würde ich berechnen, wo ich meinen Punkt für den Wert 54% bei 12 Grad einstellen soll?

Meine Mathe ist irgendwie schrecklich xD

ich jede Art von Hilfe schätzen würde und bitte Fragen stellen, wenn ich mir genug, um nicht klar.

Danke für das Hören und danken Ihnen im Voraus für Sie tiefe Einblicke: D

EDIT (ausführlicher erläutern):

Hier ist ein Bild zu zeigen, was ich zu tun versuche:

Ich hoffe, dies macht meine Frage ein wenig verständlicher.
(Wie Sie sehen können, nicht die gleichen Werte wie oben)

Ty für Ihre Geduld!

Answer 1

Sie diese können von polar (Radius, Winkel) Koordinaten kartesisch diejenigen konvertieren:

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

Zum Beispiel, wenn Sie auf 12 ° zeichnen möchten, können Sie den Punkt wie folgt berechnen:

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

EDIT: meine polarToCartesian Funktion nimmt radians als Eingabe, wie viele Funktion im Canvas-API. Wenn Sie mehr an Grad sind, können Sie diese brauchen:

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

Answer 2

Hier gehen Sie (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);