Muestra diferentes valores en diferentes ángulos en un círculo utilizando el lienzo html5

Question

Uso de HTML5 Canvas y Javascript Necesito mostrar diferentes valores (representados por un punto) en diferentes ángulos dentro de un círculo.

datos Ejemplo:
val 34% @ 0 °,
val 54% @ 12 °,
val 23% @ 70 °,
y así sucesivamente ...

Si tengo una lienzo de 300 x 300 px y el centro del círculo está ubicado en x: 150px e y: 150px con un radio de 150px, ¿cómo calcularía dónde establecer mi punto para el valor 54% a 12 grados?

Mi matemática es algo horrible xD

lo agradecería cualquier tipo de ayuda y por favor las preguntas si no hago lo suficientemente claro.

Gracias por su atención y gracias de antemano para usted una visión profunda: D

EDIT (para explicar con más detalle):

Aquí es una imagen para ilustrar lo que estoy tratando de lograr:

Espero que esto haga mi pregunta un poco más comprensible.
(Como puede ver, no los mismos valores que arriba)

Ty para su paciencia!

Answer 1

Usted puede usar esto para convertir de polar (radio, ángulo) coordina a los cartesianos:

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

Por ejemplo, si desea dibujar a 12 °, es posible calcular el punto de la siguiente manera:

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

EDIT: mi función polarToCartesian toma radians como entrada, ya que muchas funciones en la API Canvas. Si estás más acostumbrado a grados, es posible que esto:

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

Answer 2

Aquí tiene (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);