Visualizzazione di valori diversi con angoli diversi di una circonferenza utilizzando la tela html5

Question

Uso di Canvas HTML5 e Javascript È necessario visualizzare valori diversi (rappresentati da un punto) in angoli diversi all'interno di un cerchio.

dati Esempio:
val 34% @ 0 °,
val 54% @ 12 °,
val 23% @ 70 °,
ecc ...

Se ho un tela 300 x 300 px e il centro del cerchio si trova in x: 150px ey: 150px con un raggio di 150 px, come dovrei calcolare dove impostare il punto per il 54% a 12 gradi?

mia matematica è un pò terribile xD

Apprezzerei qualsiasi tipo di aiuto e vi prego di fare domande se non faccio me stesso abbastanza chiaro.

Grazie per l'ascolto e vi ringrazio in anticipo per voi profonde intuizioni: D

EDIT (per spiegare in modo più dettagliato):

Ecco un'immagine per illustrare quello che sto cercando di realizzare:

Spero che ciò renda la mia domanda un po 'più comprensibile.
(Come potete vedere, non gli stessi valori di sopra)

Ty per la vostra pazienza!

Answer 1

È possibile utilizzare questo convertire da polare (raggio, angolo) coordina a quelli cartesiani:

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

Per esempio, se si vuole disegnare a 12 °, si può calcolare il punto in questo modo:

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

EDIT: mia funzione polarToCartesian prende radians come input, come molti funzione API tela. Se siete più abituati a gradi, potrebbe essere necessario questo:

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

Answer 2

Qui si va (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);