顯示在圓不同的角度不同的值使用HTML5畫布

Question

使用HTML5畫布和Javascript我需要在圓內不同的角度來顯示不同的值（由點表示的可能）。

實施例的數據：
VAL 34％@ 0°，
VAL 54％@ 12°，
VAL 23％@ 70℃，
等等...

如果我有一個帆布300 x 300像素，圓的中心位於X：150像素和y：150像素與150像素半徑，我將如何計算在哪裏設置我的價值54％的網點在12度？

我的數學是有點可怕的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; 

編輯：我polarToCartesian函數將radians作爲輸入，作爲畫布API在許多功能。如果你更習慣於度，可能需要這樣的：

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);