用三角函数做动画HTML5canvas，但是这个方块怎么定位呢？

Question

有时候你希望能回到过去告诉年轻的自己，数学确实很重要！但我怀疑我当时会不会听。我最近一直在玩三角函数，在这个特定示例中使用 HTML5 canvas 来制作动画。

这是一个超级简单的动画：它围绕 canvas 的中心以圆形方式放置一个圆弧。 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

所以圆弧是通过将 canvas 的中心与返工公式：(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>

用三角函数做动画HTML5canvas，但是这个方块怎么定位呢？

Using trigonometry to animate HTML5 canvas, but how to position this square?

html

javascript

math

trigonometry

canvas