Как поворачивать объект в сторону мыши?

Question

[Den_1337]

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);

Answer 1

[0xD34F]

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();

Comments

[Den_1337]

СПАСИБО!!! ОГРОООООМНОЕ СПАСИБО!