var
canvas = document.getElementById("canvas");
canvas.width=window.innerWidth;
canvas.height=window.innerHeight;
var
ctx=canvas.getContext("2d");
var mouse;
$(window).mousemove(function(e){
// mouse = угол куда должен поворачиватся объект
});
function drawRect (x,y,w,h,a){
var dx = x+w/2;
var dy = y+h/2;
if(a){
a = a * (Math.PI / 180); // переводим радианы в градусы
ctx.save();
ctx.translate(dx,dy);
ctx.rotate(a);//тут объект поворачивается
ctx.translate(-dx,-dy);
}
ctx.strokeRect(x,y,w,h);
if(a){
ctx.restore();
}
}
setInterval(function(){
ctx.clearRect(0,0,innerWidth,innerHeight);
drawRect(50,50,50,50,mouse);
},0);
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
let X, Y;
document.addEventListener('mousemove', function(e) {
X = e.clientX;
Y = e.clientY;
});
function drawRect(x, y, w, h) {
const dx = x + w / 2;
const dy = y + h / 2;
const angle = Math.atan2(X - dx, Y - dy);
ctx.save();
ctx.translate(dx, dy);
ctx.rotate(-angle);
ctx.translate(-dx, -dy);
ctx.strokeRect(x, y, w, h);
ctx.restore();
}
function draw() {
ctx.clearRect(0, 0, innerWidth, innerHeight);
drawRect(50, 50, 50, 50);
requestAnimationFrame(draw);
}
draw();