用三角函数来制作HTML5画布动画，但这个正方形怎么定位？

Question

有时候你希望能回到过去，告诉年轻的自己，数学确实很重要! 但我怀疑自己当时会不会听进去。最近我一直在玩三角学，在这个特殊的例子中，我用HTML5画布来做动画。

这是一个超级简单的动画。它围绕画布中心以圆周方式定位一个弧线。X和Y的位置是基于基本的三角函数sinus和cosinus计算的。"SohCahToa"。我想我开始明白了。但不知为何，我无法理解如何在其中一个三角形边的中间画一个正方形。

let radius = 200;
let angle = 0;
x = centerX + Math.cos(angle) * radius;

ctx.beginPath();
ctx.fillRect(x/2, centerY, 20, 20);

https:/codepen.iomelvinidemapenwvKPepa?editors=1010。

所以弧线的画法是以画布为中心与返工公式相加。(co)sinus--X=Cos，Y=Sin）的角度乘以圆的半径。

如果我们只取X的位置(红线)，想画出弧线位置的平方一半。( 所以在 中线 )我们应该可以将新计算的X位置除以二，对吗？但如果我这样做，正方形就会神奇地完全画在圆圈之外。

这到底是怎么回事？为什么会出现这种情况？我应该用什么计算方法来代替正方形在整个动画中定位在红线的中间？

先谢谢你

Answer 1

你的 x 定义为。

x = centerX + Math.cos(angle) * radius;

但当你想除以2时，你只需要除以： Math.cos(angle) * radius而 centerX 为零点，其站位如是。

所以矩形应该放置在。

centerX + Math.cos(angle)/2

另外，我觉得如果你把矩形的宽度减少一半，得到的效果会更好。

centerX + Math.cos(angle)/2 - 10

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
let radius = 200;

function frame(angle) {
  const cx = canvas.width / 2,
  cy = canvas.height / 2,
  x = Math.cos(angle) * radius,
  y = Math.sin(angle) * radius;
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.beginPath();
  ctx.moveTo(cx, cy);
  ctx.lineTo(cx+x, cy+y);
  ctx.lineTo(cx+x, cy);
  ctx.lineTo(cx, cy);
  ctx.stroke();
  ctx.closePath();
  ctx.beginPath();
  ctx.arc(cx+x, cy+y, 10, 0, Math.PI*2);
  ctx.fill();
  ctx.fillRect(cx + x/2 - 10, cy - 10, 20, 20);
  ctx.closePath();
  requestAnimationFrame(()=>frame(angle+.03));
}
frame(0)

canvas {
display: block;
max-height: 100vh;
margin: auto;
}

<canvas width="500" height="500"></canvas>