使用三角函数为 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.io/melvinidema/pen/wvKPepa?editors=1010

所以弧线是通过将画布的中心与 返工公式：(co)sinus - 对于 X = Cos，对于 Y = Sin) 角度乘以圆的半径。

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

发生了什么事？为什么它会这样？在整个动画过程中，我应该使用什么计算来让正方形定位在红线的中间？

提前致谢！

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>