Math.atan2和cos sin角度不交叉畫布

Question

我需要圓始終與直線相交。 我是新來的數學功能，並試圖牢牢抓住他們。 我認爲這與罪和cos有關，但我可能是錯的。 它爲什麼沒有按預期行事？

codepen： 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得到角度時乘以寬度與高度的比值即可。看例子。

從OP的codepen複製並修改的示例。

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>