Question

我正在尝试按照它和鼠标之间的角度制作一个矩形。基本上，如果鼠标与矩形的当前角度之间的角度高于矩形的当前角度，则它会增加1并继续直到条件为假。当两者之间的角度低于矩形的当前角度时，会发生相反的情况。我的问题是鼠标和矩形之间的角度，180度后变为-180。这会导致矩形再次绕行而不是达到181度。我试图找到解决这个问题的办法，但不知怎的，我总是遇到同样的问题。在此先感谢，这是我的代码：

<body>
<canvas id="ctx" width="500" height="500" style="border:1px solid #000000;"></canvas>
</body>
<script>
var canvas = document.getElementById("ctx"),
    ctx = canvas.getContext("2d"),
    width = canvas.width = window.innerWidth,
    height = canvas.height = window.innerHeight,
    mouse,
    angle = 0;
function test() {
    "use strict";
    var dX = mouse.X - 200,
        dY = mouse.Y - 200,
        rad = (Math.atan2(dY, dX)),
        deg = (rad * (180 / Math.PI)),
        player = {
            x : 200,
            y : 200,
            width : 40,
            height : 10,
            angle : 0,
            dAngle : 0
        };
    //Test
    if (deg > angle) {
        angle += 1;
    } else if (deg) {
        angle -= 1;
    }
    ctx.clearRect(0, 0, width, height);
    ctx.translate(player.x, player.y);
    ctx.rotate((angle * Math.PI / 180));
    ctx.fillRect(0, -player.height / 2, player.width, player.height);
    //console.log("deg :" + deg + "angle : " + angle);
    ctx.setTransform(1, 0, 0, 1, 0, 0);
}
window.onmousemove = function (mm) {
    "use strict";
    mouse = {
        X : mm.clientX - document.getElementById('ctx').getBoundingClientRect().left,
        Y : mm.clientY - document.getElementById('ctx').getBoundingClientRect().top
    };
};

setInterval(test, 40);
  </script>

Answer 1

Math.atan2（）方法返回-π和π之间的数值，表示https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/atan2中提到的（x，y）点的角度θ 所以你只需要从[-180; 180]到[0; 360]的转换值。你可以这样说，degrees = (degrees + 360) % 360;

Answer 2

＆＃13;

<body>
<canvas id="ctx" width="500" height="500" style="border:1px solid #000000;"></canvas>
</body>
<script>
var canvas = document.getElementById("ctx"),
    ctx = canvas.getContext("2d"),
    width = canvas.width = window.innerWidth,
    height = canvas.height = window.innerHeight,

    //Initialize with dummy values
    mouse={X:0,Y:0},
    angle = 0;
function test() {
    "use strict";
    var dX = mouse.X - 200,
        dY = mouse.Y - 200,
        rad = (Math.atan2(dY, dX)),
        deg = (rad * (180 / Math.PI)),
        player = {
            x : 200,
            y : 200,
            width : 40,
            height : 10,
            angle : 0,
            dAngle : 0
        };
    //Test
    if (deg > angle) {
        angle += 1;
    } else if (deg) {
        angle -= 1;
    }
    ctx.clearRect(0, 0, width, height);
    ctx.translate(player.x, player.y);
    ctx.rotate((angle * Math.PI / 180));
    ctx.fillRect(0, -player.height / 2, player.width, player.height);
    //console.log("deg :" + deg + "angle : " + angle);
    ctx.setTransform(1, 0, 0, 1, 0, 0);
}
window.onmousemove = function (mm) {
    "use strict";
    mouse = {
        X : mm.clientX - document.getElementById('ctx').getBoundingClientRect().left,
        Y : mm.clientY - document.getElementById('ctx').getBoundingClientRect().top
    };
};

setInterval(test, 40);
  </script>

＆＃13;

Answer 3

你可以通过打印（deg-angle）注意角度翻转在1.0度以内。只要它在那个范围内就停止。（并且在处理浮动时不要使用普通的＆gt;或==）

当然没有什么特别关于1.0，在这里我用spd替换它：

<body>
<canvas id="ctx" width="500" height="500" style="border:1px solid #000000;"></canvas>
</body>
<script>
var canvas = document.getElementById("ctx"),
    ctx = canvas.getContext("2d"),
    width = canvas.width = window.innerWidth,
    height = canvas.height = window.innerHeight,
    mouse = {X:0.0, Y:0.0},
    angle = 0;
function test() {
    "use strict";
    var dX = mouse.X - 200,
        dY = mouse.Y - 200,
        rad = (Math.atan2(dY, dX)),
        deg = (rad * (180 / Math.PI)),
        player = {
            x : 200,
            y : 200,
            width : 40,
            height : 10,
            angle : 0,
            dAngle : 0
        };
    //Test
    var spd = 5.0;
    if (Math.abs(deg - angle) - spd > 0.0000001)
        angle += Math.sign(deg - angle)*spd;

    ctx.clearRect(0, 0, width, height);
    ctx.translate(player.x, player.y);
    ctx.rotate((angle * Math.PI / 180));
    ctx.fillRect(0, -player.height / 2, player.width, player.height);
    //console.log("deg :" + deg + "angle : " + angle);
    ctx.setTransform(1, 0, 0, 1, 0, 0);
}
window.onmousemove = function (mm) {
    "use strict";
    mouse = {
        X : mm.clientX - document.getElementById('ctx').getBoundingClientRect().left,
        Y : mm.clientY - document.getElementById('ctx').getBoundingClientRect().top
    };
};

setInterval(test, 40);
  </script>

关于角度的Javascript

3 个答案: