Hiển thị các giá trị khác nhau ở các góc khác nhau trong một vòng tròn sử dụng html5 canvas

Question

Sử dụng HTML5 Canvas và Javascript Tôi cần hiển thị các giá trị khác nhau (được biểu thị bằng dấu chấm) ở các góc khác nhau trong một vòng tròn.

dữ liệu Ví dụ:
val 34% @ 0 °,
val 54% @ 12 °,
val 23% @ 70 °,
và vân vân ...

Nếu tôi có một canvas 300 x 300px và trung tâm của vòng tròn được đặt tại x: 150px và y: 150px với bán kính 150px, làm cách nào để tính toán vị trí đặt dấu chấm của tôi cho giá trị 54% ở 12 độ?

toán của tôi là kinda khủng khiếp xD

Tôi đánh giá cao bất kỳ loại giúp đỡ và xin vui lòng đặt câu hỏi nếu tôi không làm cho bản thân mình đủ rõ ràng.

Cảm ơn bạn đã lắng nghe và cảm ơn bạn trước cho bạn cái nhìn sâu sắc: D

EDIT (để giải thích một cách chi tiết hơn):

Dưới đây là một hình ảnh để minh họa cho những gì tôi đang cố gắng để hoàn thành:

Tôi hy vọng điều này làm cho câu hỏi của tôi dễ hiểu hơn một chút.
(Như bạn có thể thấy, không giống các giá trị như trên)

Ty cho sự kiên nhẫn của bạn!

Answer 1

Bạn có thể sử dụng để chuyển đổi từ vùng cực (bán kính, góc) phối cho những người thân Descartes:

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

Ví dụ, nếu bạn muốn vẽ tại 12 °, bạn có thể tính điểm như thế này:

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

EDIT: chức năng polarToCartesian tôi mất radians như đầu vào, như nhiều chức năng trong API Canvas. Nếu bạn sử dụng nhiều mức độ, bạn có thể cần điều này:

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

Answer 2

Ở đây bạn đi (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);