다른 각도로 html5 캔버스를 사용하여 원에서 서로 다른 값을 표시하십시오.

Question

HTML5 캔버스와 자바 스크립트를 사용하여 원 안의 각기 다른 값 (점으로 표시)을 표시해야합니다.

데이터 예 : 0 ° @
브로 34 %, 12 ° @
브로 54 %, 70 ℃ @
브로 23 %,
등등 ...

I가있는 경우 캔버스 300 x 300px이고 원의 중심은 x : 150px 및 y : 150px에 있으며 반경은 150px입니다. 12도에서 54 %의 값으로 내 점을 어디에 설정해야합니까?

내 수학은 좀 끔찍한의 xD

내가 도움의 어떤 종류를 감사하고 내가 충분히 자신을 명확하게하지 않으면 질문을하시기 바랍니다 것입니다.

듣기 주셔서 감사하고 깊은 통찰력 사전에 감사합니다 : D

EDIT (더 자세히 설명하기 위해) :

여기

내가 달성하기 위해 노력하고 무엇을 설명하는 이미지입니다 :

이 질문을 통해 좀 더 이해할 수 있기를 바랍니다.
(위와 같은 값은 아닙니다.)

Ty (인내심)!

Answer 1

당신은 극성 (반경, 각도)로 변환하려면이 옵션을 사용 데카르트 사람 좌표 수

:이 같은 점을 계산할 수, 당신은 12 ℃에서 그리려는 경우, 예를 들어

// θ : 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; 

편집 : 내 polarToCartesian 기능은 캔버스 API의 많은 함수로, 입력으로 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);