HTML5 캔버스 호 코드 수정

안녕 모두 아날로그 시계 시간 간격 사이의 아크를 그릴 필요가. 시작 시간과 종료 시간을 입력으로 받아서이를 기반으로 아크를 그리는 간단한 코드가 필요합니다. 예를 들어 11시를 시작 시간으로, 12시를 종료 시간으로 놓으면 11시에서 12시에 시작하는 호를 그려야합니다. 이 코드를 실행할 때 볼 수 있듯이 출력이 잘못되었습니다. 아크가 그려지는 위치가 올바르지 않습니다. 11 시부 터 12 시까 지 시작하는 호를 그려야합니다. 도와주세요. output of the code HTML5 캔버스 호 코드 수정

<!DOCTYPE HTML> 
<html> 
    <head> 
    <style> 
     body { 
     margin: 0px; 
     padding: 0px; 
     } 
    </style> 
    </head> 
    <body> 
    <canvas id="myCanvas" width="578" height="250"></canvas> 
    <script> 
     function calculateAngle(hours,mins) { 

      var hDegrees = (hours * 30) + (mins * 0.5); 
      var angle = (hDegrees * Math.PI/180); //convert in radians 

      console.log(hDegrees); 
      console.log(angle); 

      return angle; 
     } 

     var canvas = document.getElementById('myCanvas'); 
     var context = canvas.getContext('2d'); 
     var x = canvas.width/2; 
     var y = canvas.height/2; 
     var radius = 100; 
     var startAngle = 0; 
     var endAngle = 2 * Math.PI; 
     var counterClockwise = false; 

     context.beginPath(); 
     context.arc(x, y, radius, startAngle, endAngle, counterClockwise); 
     context.lineWidth = 10; 

     // line color 
     context.fillStyle = '#481e63'; 
     context.fill(); 
     context.strokeStyle = '#62278d'; 
     context.stroke(); 

     context.beginPath(); 
     context.arc(x, y, radius, calculateAngle(11,0), calculateAngle(12,0), counterClockwise); 
     context.strokeStyle = '#DD2B8F'; 
     context.stroke(); 

    </script> 
    </body> 
</html>

출처

2014-09-30 Imran Khan

각도 0은 원의 바로 오른쪽에서 시작하기 때문에. 따라서 -pi/2으로 이동하면 올바른 결과를 얻을 수 있습니다. 그래서 -Math.PI/2하여 startAngle 및 endAngle을 변경 : 시계 calculateAngle()를 계산하는 코드에서, 당신이 사용하지 않는 것이

var startAngle = 0 - (Math.PI/2);   // -Math.PI/2 
var endAngle = (2 * Math.PI) - (Math.PI/2); // 3 * Math.PI/2 
....

참고.

function calculateAngle(hours,mins) { 

    var hDegrees = (hours * 30) + (mins * 0.5); 
    var angle = (hDegrees * Math.PI/180); //convert in radians 
    angle -= Math.PI/2 // <-- Here 
    console.log(hDegrees); 
    console.log(angle); 

    return angle; 
}

을 그리고 여기가 느리게 fiddle을 만들어 : 그래서 당신이 여기에 함수의 각도에서 뺄 필요가있을 것이다.

출처

2014-09-30 17:36:36

+1 분명히하기 위해 'context.arc'는 3시 방향에서 시작되므로 PI/2를 빼면 시작 각도가 12 시로 설정됩니다. – markE

+1 당신은 별입니다. 완벽하게 일했습니다. 감사 –

HTML5 캔버스 호 코드 수정

답변

관련 문제