Math.atan2和cos sin角度不交叉画布
问题描述:
我需要圆始终与直线相交。 我是新来的数学功能,并试图牢牢抓住他们。 我认为这与罪和cos有关,但我可能是错的。 它为什么没有按预期行事?Math.atan2和cos sin角度不交叉画布
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)
})
答
你需要找到在扁圆形的角度。要做到这一点,只需在乘以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>
谢谢我的朋友。你统治。 –