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>

來源

2014-09-30 Imran Khan

因爲角度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。

來源

2014-09-30 17:36:36

+1是的，只是爲了澄清，'context.arc'從3點鐘的角度開始，所以減去PI/2會將開始角度拉到12點。 – markE 2014-09-30 17:42:27

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

HTML5畫布圓弧代碼更正

回答

相關問題