如何使某些东西向鼠标旋转？

Question

我正在尝试解决一个困扰我一段时间的问题，有人可以向我解释如何使*红色矩形 face/aim 朝向我的鼠标并向我解释它是如何工作的吗太棒了！！！

这里是Fiddle

var canvas = document.getElementById('canvas');

var context = canvas.getContext('2d');

var player = {
  x: 200,
  y: 200,
}

drawPlayer = function(something) {
  context.beginPath();
  context.fillStyle = "blue";
  context.arc(something.x, something.y, 30, 0, 2 * Math.PI);
  context.fill();

  context.fillStyle = "red";
  context.fillRect(something.x, something.y - 10, 50, 20);
  context.restore();
}

update = function() {
  context.clearRect(0, 0, 500, 500)
  drawPlayer(player);
}

setInterval(update, 20);

<canvas id="canvas" style="outline: 1px solid #ccc" width="500" height="500"></canvas>

Answer 1

使用 context.translate 将坐标转换到播放器的中心，然后 context.rotate 旋转矩形。

要找到鼠标位置和播放器中心之间的角度，您可以使用 Math.atan2 函数。

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');

var player = {
    x: 200,
    y: 200,
}

drawPlayer = function(something, angle) {
    context.clearRect(0, 0, 500, 500);
    context.beginPath();
    context.fillStyle = "blue";
    context.arc(something.x, something.y, 30, 0, 2 * Math.PI);
    context.fill();

    // save the untranslated context
    context.save();
    context.beginPath();
    // move the rotation point to the center of the player
    context.translate(something.x, something.y);
    context.rotate(angle);

    context.fillStyle = "red";
    // note that coordinates are translated, 
    // so 0 is player.x and -10 is player.y - 10
    context.fillRect(0, - 10, 50, 20);
    // restore the context to its untranslated state
    context.restore();
}

drawPlayer(player, 0);

document.onmousemove = function(e) { 
    var angle = Math.atan2(e.pageY - player.y, e.pageX - player.x)
    drawPlayer(player, angle);
}

<canvas id="canvas" style="outline: 1px solid #ccc" width="500" height="500"></canvas>

如何使某些东西向鼠标旋转？

How do I make something Rotate towards mouse?

html

javascript

mouse

mouseevent

html5-canvas