gpt4 book ai didi

关于 Angular JavaScript

转载 作者:行者123 更新时间:2023-12-03 02:50:18 24 4
gpt4 key购买 nike

我试图按照它和鼠标之间的 Angular 制作一个矩形。基本上,如果鼠标与矩形当前 Angular 之间的 Angular 大于矩形当前 Angular ,则会加 1 并继续,直到条件为 false。当两者之间的 Angular 小于矩形的当前 Angular 时,会发生相反的情况。我的问题是鼠标和矩形之间的 Angular ,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>

最佳答案

Math.atan2() 方法返回 -π 和 π 之间的数值,表示 (x, y) 点的 Angular theta,如 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/atan2 中所述。所以你只需要一个从 [-180;180] 到 [0;360] 的转换值。你可以用这种方式来做到这一点 Degrees = ( Degrees + 360) % 360;

关于关于 Angular JavaScript,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47899300/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com