HTML5画布圆弧代码更正

问题描述：

你好，我需要在模拟时钟的时间间隔之间绘制一条弧线。我需要一个简单的代码，它将开始时间和结束时间作为输入并基于此绘制弧线。例如，如果我将11:00作为开始时间并将12:00作为结束时间，那么它应该绘制从11:00点到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>

答

因为角度0从圆的右侧开始。所以你只需要移动-pi/2，你会得到正确的结果。因此，通过-Math.PI/2改变startAngle和endAngle：

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

注意，在你的代码来计算时钟calculateAngle()，您不使用这些。所以，你需要从多个角度的功能，这里减：

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。

+1是的，只是为了澄清，'context.arc'从3点钟的角度开始，所以减去PI/2会将开始角度拉到12点。 – markE 2014-09-30 17:42:27

+1你是明星。完美工作。谢谢 – 2014-09-30 17:52:31

HTML5画布圆弧代码更正

相关推荐