通过鼠标

Question

我试图在台球游戏中创建像cue这样的东西，需要用鼠标旋转固定大小的线。

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

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

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

所以，我的线有1个固定端和固定尺寸（可能是100个像素），它将跟随鼠标。

谢谢。

Answer 1

只需确定线的起点和鼠标位置之间的角度：

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

演示

＆＃13;

＆＃13;

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

＆＃13;

<canvas></canvas>

＆＃13;

＆＃13;

＆＃13;