javascript - 用鼠标旋转固定大小的线

Question

我想在台球游戏中创建类似球杆的东西，需要通过鼠标旋转固定大小的线。

我希望跟随鼠标位置的那条线是固定的，例如 100 像素。

演示:http://jsfiddle.net/DAEpy/1/

我尝试使用 rotate() 函数执行此操作，但它会旋转所有 Canvas 。

所以，我的线有 1 个固定的末端和固定的大小(可能是 100 像素)，并且它会跟随鼠标。

谢谢。

Answer 1

只要确定直线起点与鼠标位置的夹 Angular 即可:

var dx = mouse.x - line.x1,
    dy = mouse.y - line.y1,
    angle = Math.atan2(dy, dx);

然后使用 100 像素半径渲染线:

line.x2 = line.x1 + 100 * Math.cos(angle);
line.y2 = line.y1 + 100 * Math.sin(angle);

演示

var ctx = document.querySelector("canvas").getContext("2d"),
    line = {
      x1: 150, y1: 70,
      x2: 0, y2: 0
    },
    length = 100;

window.onmousemove = function(e) {
  //get correct mouse pos
  var rect = ctx.canvas.getBoundingClientRect(),
      x = e.clientX - rect.left,
      y = e.clientY - rect.top;

  // calc line angle
  var dx = x - line.x1,
      dy = y - line.y1,
      angle = Math.atan2(dy, dx);

  //Then render the line using 100 pixel radius:
  line.x2 = line.x1 + length * Math.cos(angle);
  line.y2 = line.y1 + length * Math.sin(angle);
 
  // render
  ctx.clearRect(0, 0, 300, 150);
  ctx.beginPath();
  ctx.moveTo(line.x1, line.y1);
  ctx.lineTo(line.x2, line.y2);
  ctx.stroke()
  
}

<canvas></canvas>