Question

大家好，我需要在模拟时钟的时间间隔之间画一个弧。我需要一个简单的代码，将开始时间和结束时间作为输入，并根据它绘制弧。例如，如果我将11:00作为开始时间而将12:00作为结束时间，则应该从11:00 o时钟到12点钟绘制弧形。正如您在运行此代码时所看到的那样输出错误我的意思是弧绘制位置不正确。它应画一个从11点钟到12点钟的弧形但不是。请帮忙。 output of the code

<!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>

Answer 1

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

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。

HTML5画布弧码修正

1 个答案: