我该如何制作旋转鼠标？ [英] How do I make something Rotate towards mouse?

问题描述

我试图解决一个问题，一直在困扰着我一段时间，有人可以向我解释如何使*红色矩形脸/瞄准我的鼠标，并向我解释它是如何工作的，这将是真棒！ ！

以下是 小提琴 a>

  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 =canvasstyle =outline：1px solid #cccwidth =500height。
 
 < =500>< / canvas>  
 

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

要找到鼠标位置和玩家中心之间的角度，可以使用 Math.atan2 function。

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（）; //保存未翻译的上下文context.save（）; context.beginPath（）; //将旋转点移动到播放器的中心context.translate（something.x，something.y）; context.rotate（角度）; context.fillStyle =red; //注意坐标被翻译，//所以0是player.x，-10是player.y - 10 context.fillRect（0， - 10，50，20）; //将上下文恢复到未翻译状态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 =canvasstyle =outline：1px solid #cccwidth =500height =500>< / canvas>

I am trying to solve a question which has been bugging me for a while, can someone explain to me how to make the *red rectangle face/aim towards my mouse and explain to me how it works it would be awesome!!!

Here is the 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>

解决方案

Use context.translate to translate coordinates to the center of your player and then context.rotate to rotate the rectangle.

To find the angle between the mouse position and the center of the player you can use Math.atan2 function.

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>

这篇关于我该如何制作旋转鼠标？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！