javascript - 使用 Javascript 收集鼠标在 Canvas 上的位置

Question

有没有一种简单的方法可以在不使用 jquery 旋转某些东西的情况下收集屏幕上的鼠标指针。我在屏幕上有一个带有 ARM 的人物，希望它们沿着缪斯指针的方向旋转。例如，我将如何做如下所示的事情

if (mosue_moved_up) {
digit = 1;
} else if (mouse_moved_down) {
digit = 2;
} else if (mouse_moved_right) {
digit =3;
} else if (mouse_moved_left) {
digit = 4;
}

Answer 1

您可以像这样获取鼠标和肩膀之间的 Angular :

var dx = mouseX - shoulderX;
var dy = mouseY - shoulderY;
var angle=Math.atan2(dy,dx);

您可以像这样从肩膀到鼠标获取 ARM 端点:

var endX = shoulderX + armlength * Math.cos(angle);
var endY = shoulderY + armlength * Math.sin(angle);

这里是示例代码和演示:

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;
var BB=canvas.getBoundingClientRect();
var offsetX=BB.left;
var offsetY=BB.top;
ctx.lineCap='round';
ctx.fillStyle='blue';
ctx.strokeStyle='green';
ctx.lineWidth=8;

var PI=Math.PI;
var cx=150;
var cy=150;
var armlength=65;

canvas.onmousemove=handleMousemove;

draw(0,0);

function handleMousemove(e){
  e.preventDefault();
  e.stopPropagation();
  var mouseX=e.clientX-offsetX;
  var mouseY=e.clientY-offsetY;
  draw(mouseX,mouseY);
}

function draw(mouseX,mouseY){
  var dx=mouseX-cx;
  var dy=mouseY-cy;
  var angle=Math.atan2(dy,dx);
  var x=cx+armlength*Math.cos(angle);
  var y=cy+armlength*Math.sin(angle);

  ctx.clearRect(0,0,cw,ch);

  ctx.fillRect(cx-15,cy-10,30,100);

  ctx.beginPath();
  ctx.moveTo(cx,cy);
  ctx.lineTo(x,y);
  ctx.strokeStyle='green';
  ctx.stroke();

}

body{ background-color: ivory; }
canvas{border:1px solid red;}

<h4>"Arm" will move as the mouse moves.</h4>
<canvas id="canvas" width=300 height=300></canvas>