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

我正在尝试在台球游戏中创建类似提示的东西,并且需要通过鼠标旋转固定尺寸的线.

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

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

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

因此,我的行有1个固定的末端和固定的大小(可能是100像素),它将跟随鼠标.

谢谢.

解决方法:

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

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>

标签：canvas,html5-canvas,javascript
来源： https://codeday.me/bug/20191118/2031315.html