Javascript 如何旋转矩形以指向鼠标
我需要帮助旋转一个矩形，每次鼠标移动时指向屏幕上的鼠标。我一直在尝试使用onmousemove事件，计算度/角度，然后转换为弧度，但出于某种原因，当我将弧度变量rad放入rotate（）中时；，矩形根本不旋转Javascript 如何旋转矩形以指向鼠标,javascript,rotation,mouse,atan2,Javascript,Rotation,Mouse,Atan2,我需要帮助旋转一个矩形，每次鼠标移动时指向屏幕上的鼠标。我一直在尝试使用onmousemove事件，计算度/角度，然后转换为弧度，但出于某种原因，当我将弧度变量rad放入rotate（）中时；，矩形根本不旋转 <!DOCTYPE html> <html> <head> <title>Rotate Rectangle Project</title> <style> canvas { background:#f05424; di
<!DOCTYPE html>
<html>
<head>
<title>Rotate Rectangle Project</title>
<style>
canvas {
background:#f05424; display: block; margin: 0 auto;
}
body {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<canvas id="myCanvas" width=500 height=500 top=10px></canvas>
<p id='coord'>0</p>
<p id='degree'>0</p>
<p id='radian'>0</p>
<script>
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext("2d");
var x = 100;
var y = 100;
var w = 100;
var h = 30;
var rX, rY, mX, mY, degrees, rad, coords;
document.onmousemove = function(e){
rX =533;
rY =100;
mX = e.clientX;
mY = e.clientY;
coords = mX + ',' + mY;
degrees = mY - rY + mX - rX;
rad = Math.atan2(mY - rY, mX - rX)* Math.PI/180;
draw();
document.getElementById('coord').innerHTML = coords;
document.getElementById('degree').innerHTML = degrees;
document.getElementById('radian').innerHTML = rad;
};
function rectangle(){
ctx.beginPath();
ctx.translate(x, y);
ctx.rotate(rad);
ctx.translate(-x, -y);
ctx.rect(x, y, w, h);
ctx.fillStyle = '#f8c778';
ctx.fill();
ctx.closePath();
}
function draw(){
ctx.clearRect(x,y,canvas.width,canvas.height);
rectangle();
}
</script>
</body>
</html>
旋转矩形项目
帆布{
背景：#f05424；显示：块；边距：0自动；
}
身体{
边际：0px；
填充：0px；
}
0
0
0
var canvas=document.getElementById（'myCanvas'）；
var ctx=canvas.getContext（“2d”）；
var x=100；
变量y=100；
var w=100；
var h=30；
变量rX、rY、mX、mY、degrees、rad、coords；
document.onmousemove=函数（e）{
rX=533；
rY=100；
mX=e.clientX；
mY=e.clientY；
coords=mX+'，'+mY；
度=mY-rY+mX-rX；
rad=Math.atan2（mY-rY，mX-rX）*Math.PI/180；
draw（）；
document.getElementById（'coord'）。innerHTML=coords；
document.getElementById（'degree'）。innerHTML=degrees；
document.getElementById（'radian'）。innerHTML=rad；
};
函数矩形（）{
ctx.beginPath（）；
ctx.translate（x，y）；
ctx.旋转（rad）；
ctx.translate（-x，-y）；
ctx.rect（x，y，w，h）；
ctx.fillStyle='#f8c778'；
ctx.fill（）；
ctx.closePath（）；
}
函数绘图（）{
clearRect（x，y，canvas.width，canvas.height）；
矩形（）；
}
onmousemoverectanglevar canvas=document.getElementById（'myCanvas'）；
var ctx=canvas.getContext（“2d”）；
var x=100；
变量y=100；
var w=100；
var h=30；
变量mouseX、mouseY、度、rad、坐标；
document.onmousemove=函数（e）{
mouseX=e.clientX；
穆西=e.clientY；
coords=mouseX+'，'+mouseY；
度数=mouseY-y+mouseX-x；
rad=Math.atan2（mouseY-y，mouseX-x）*（180/Math.PI）；
矩形（）；
};
函数矩形（）{
clearRect（0，0，canvas.width，canvas.height）；
ctx.beginPath（）；
ctx.translate（x，y）；
ctx.旋转（rad）；
ctx.translate（-x，-y）；
ctx.rect（x，y，w，h）；
ctx.fillStyle='#f8c778'；
ctx.fill（）；
ctx.closePath（）；
}正文{
边际：0px；
填充：0px；
}
帆布{
背景：#f05424；
显示：块；
保证金：0自动；
}onmousemove矩形