Math.atan2 和 cos sine 角不与画布相交

Question

我需要圆总是与线相交。我是数学函数的新手，并试图牢牢掌握它们。我认为这与罪恶和cos有关，但我可能是错的。为什么它的行为不符合预期？

代码笔：http://codepen.io/philipbell/pen/PmwybL

let canvas = document.querySelector('#canvas');
let context = canvas.getContext('2d');
let width = canvas.width = window.innerWidth;
let height = canvas.height = window.innerHeight;
let centerY = height / 2;
let centerX = width / 2;
let circleSize = 10;
let Xradius = width / 2 - circleSize;
let Yradius = height / 2 - circleSize;
let angle = 0;
let dx = 10;
let dy = 10;
let distance = 20;
render();
function render() {
  context.clearRect(0, 0, width, height);
  context.save();
  context.translate(centerX, centerY);
  context.rotate(angle);
  context.beginPath();
  context.moveTo(0, 0);
  context.lineTo(window.innerWidth, 0);
  context.moveTo(distance, 0);
  context.lineTo(distance - 10, -10);
  context.moveTo(distance, 0);
  context.lineTo(distance - 10, 10);
  context.stroke();
  context.restore();
  // why isn't the line always intersecting the circle?
  var xCos = centerX + Math.cos(angle) * Xradius;
  var ySin = centerY + Math.sin(angle) * Yradius;
  context.beginPath();
  context.arc(xCos, ySin, circleSize, 0, Math.PI * 2, false);
  context.fill();
  requestAnimationFrame(render);
}
document.body.addEventListener('mousemove', (event) => {
  dx = event.clientX - centerX;
  dy = event.clientY - centerY;
  distance = Math.sqrt(dx * dx + dy * dy)
  angle = Math.atan2(dy, dx) 
})

Answer 1

您需要在扁平圆中找到角度。为此，只需在使用 atan2 获得角度时将 y 分量乘以其宽度与高度的比率。请参阅示例。

从 OP 的代码笔复制并修改的示例。

const ctx = canvas.getContext('2d');
const width = canvas.width = window.innerWidth;
const height = canvas.height = window.innerHeight;
const centerY = height / 2;
const centerX = width / 2;
const circleSize = 10;
const Xradius =(width / 2 - circleSize);
const Yradius =( height / 2 - circleSize);
var dx = 10;
var dy = 10;
render();
function render() {
  var distance;
  var angle;
  var ang2;
  ctx.setTransform(1, 0, 0, 1, 0, 0);
  ctx.clearRect(0, 0, width, height);
  
  distance = Math.sqrt(dx * dx + dy * dy);
  // get angle in scaled space
  ang2 = Math.atan2(dy* (Xradius / Yradius), dx);
  // get angle in unscaled space
  angle = Math.atan2(dy, dx);
  ctx.setTransform(1, 0, 0, 1, centerX, centerY);
  ctx.rotate(angle); // use unscaled angle
  ctx.beginPath();
  ctx.moveTo(0, 0);
  ctx.lineTo(window.innerWidth, 0);
  ctx.moveTo(distance, 0);
  ctx.lineTo(distance - 10, -10);
  ctx.moveTo(distance, 0);
  ctx.lineTo(distance - 10, 10);
  ctx.stroke();
  ctx.setTransform(1, 0, 0, 1, centerX, centerY);
  ctx.beginPath();
  ctx.arc(  // use scaled angle
      Math.cos(ang2) * Xradius,
      Math.sin(ang2) * Yradius, 
      circleSize, 
      0, Math.PI * 2
  );
  ctx.fill();
  requestAnimationFrame(render);
}
document.body.addEventListener('mousemove', (event) => {
  dx = event.clientX - centerX;
  dy = event.clientY - centerY;
})

canvas {
   position: absolute;
   top : 0px;
   left : 0px;
}

<canvas id=canvas></canvas>