通过鼠标

时间:2016-04-03 21:06:58

标签: javascript canvas html5-canvas

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

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

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

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

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

谢谢。

1 个答案:

答案 0 :(得分:3)

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

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>
&#13;
&#13;
&#13;