एचटीएमएल 5 कैनवास

Question

का उपयोग कर सर्कल में विभिन्न कोणों पर विभिन्न मान प्रदर्शित करें एचटीएमएल 5 कैनवास और जावास्क्रिप्ट का उपयोग करके मुझे एक सर्कल के अंदर विभिन्न कोणों पर अलग-अलग मान (एक बिंदु द्वारा प्रतिनिधित्व) प्रदर्शित करने की आवश्यकता है।

उदाहरण डेटा:
वैल 34% @ 0 डिग्री,
वैल 54% @ 12 डिग्री,
वैल 23% @ 70 डिग्री,
और इतने पर ...

अगर मैं एक है कैनवास 300 x 300px और सर्कल का केंद्र एक्स: 150 पीएक्स और वाई: 150 पीएक्स पर 150 पीएक्स के त्रिज्या के साथ स्थित है, मैं कैसे गणना करूंगा कि मेरे डॉट को 54% के लिए 12 डिग्री पर सेट करना है?

मेरे गणित थोड़े भयानक xD

मैं मदद के किसी भी प्रकार की सराहना करेंगे, और कृपया सवाल पूछने अगर मैं अपने आप को काफी स्पष्ट कर नहीं है।

सुनने के लिए धन्यवाद और आप गहरी अंतर्दृष्टि के लिए अग्रिम धन्यवाद: डी

संपादित करें (और अधिक विस्तार से समझाने के लिए):

यहाँ वर्णन करने के लिए कि मैं क्या पूरा करने के लिए कोशिश कर रहा हूँ एक छवि है:

मुझे आशा है कि इससे मेरा प्रश्न थोड़ा और समझ में आता है।
(जैसा कि आप देख सकते हैं, ऊपर के समान मूल्य नहीं)

आपके धैर्य के लिए 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 इनपुट के रूप में लेता है,। आप अधिक डिग्री तक इस्तेमाल कर रहे हैं, तो आप इस आवश्यकता हो सकती है:

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