Canvas Math.atan2和cos正弦角不相交画布

我需要圆始终与直线相交。 我不熟悉数学函数，并试图牢牢掌握它们。 我认为这与罪和因有关，但我可能错了。 为什么它的表现不如预期

代码笔：

---

您需要找到展平圆中的角度。要做到这一点，只需将y分量乘以其宽度与高度之比，然后使用atan2获得角度。参见示例

示例从OP的codepen复制并修改

const ctx=canvas.getContext（'2d'）；
const width=canvas.width=window.innerWidth；
const height=canvas.height=window.innerHeight；
const centerY=高度/2；
const centerX=宽度/2；
常数circleSize=10；
常数Xradius=（宽度/2-圆圈大小）；
常数Yradius=（高度/2-圆圈）；
var dx=10；
var-dy=10；
render（）；
函数render（）{
var距离；
var角；
var ang2；
setTransform（1,0,0,1,0,0）；
ctx.clearRect（0，0，宽度，高度）；
距离=数学sqrt（dx*dx+dy*dy）；
//获取缩放空间中的角度
ang2=数学atan2（dy*（x半径/Yradius），dx）；
//获取未缩放空间中的角度
角度=数学常数2（dy，dx）；
setTransform（1，0，0，1，centerX，centerY）；
ctx.rotate（angle）；//使用未缩放的角度
ctx.beginPath（）；
ctx.moveTo（0,0）；
ctx.lineTo（window.innerWidth，0）；
ctx.moveTo（距离，0）；
ctx.lineTo（距离-10，-10）；
ctx.moveTo（距离，0）；
ctx.lineTo（距离-10,10）；
ctx.stroke（）；
setTransform（1，0，0，1，centerX，centerY）；
ctx.beginPath（）；
ctx.arc（//使用缩放角度
数学cos（ang2）*Xradius，
辛（ang2）*伊拉迪乌斯，
圈出，
0，Math.PI*2
);
ctx.fill（）；
请求动画帧（渲染）；
}
document.body.addEventListener（'mousemove'，（事件）=>{
dx=event.clientX-centerX；
dy=event.clientY-centerY；
})

画布{
位置：绝对位置；
顶部：0px；
左：0px；
}

---

谢谢你，我的朋友。你太牛了

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