html5 tuvalini kullanarak bir daire içinde farklı açılarda farklı değerler görüntüleme

Question

HTML5 Tuvali ve Javascript'i kullanma Bir daire içinde farklı açılarda (nokta ile gösterilen) farklı değerleri göstermem gerekir.

Örnek veriler: 0 ° @
val% 34, 12 ° '
val% 54, 70 °'
val% 23,
ve böylece ...

bir varsa tuval 300 x 300px ve çemberin merkezi x: 150px ve y: 150px yarıçapında yer alır, 12 derecelik% 54 değeri için noktayı nereye ayarlayacağımı nasıl hesaplardım?

Benim matematik tür korkunç xD

Ben her türlü yardımı takdir ve yeterince kendimi açık yapmazsanız soru sormak lütfen ediyorum olduğunu.

dinleme için teşekkür ederiz ve derin anlayışlar için şimdiden teşekkür ederim: D

DÜZENLEME (daha ayrıntılı olarak açıklamak için):

İşte

ben başarmaya çalışıyorum istediğimi anlatmak için bir resimdir:

Umarım bu soruyu biraz daha anlaşılır kılar.
(Gördüğünüz gibi, yukarıdaki gibi aynı değerleri değil)

Sabrınız için teşekkürler!

Answer 1

Kutup (yarıçap, açı) den dönüştürmek için kullanabilir kartezyen olanlara koordinatları olabilir

: Böyle noktayı hesaplamak olabilir, sen 12 ° 'de çizmek istiyorum, Örneğin

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

:

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

DÜZENLEME: benim polarToCartesian fonksiyon Tuval API birçok fonksiyonu olarak, girdi olarak radians sürer. Eğer dereceye kullanılan konum, bu gerekebilir: Burada

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

Answer 2

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